The issue of importing CSS files that themselves import other CSS files via URL is causing a problem

Question

The issue of importing CSS files that themselves import other CSS files via URL is causing a problem

Why is this not working correctly?

A.css (css file that imports from a URL)

@import url('https://fonts.googleapis.com/css?family=Source Sans Pro:300,400,600,700,400italic,700italic&subset=latin');

App.less (Less file that imports A.css)

@import (css) './A.css';

During the webpack build process, it attempts to load

./https://fonts.googleapis.com/css?family=Source Sans Pro:300,400,600,700,400italic,700italic&subset=latin

instead of fetching the CSS from the specified URL.

Stack:

@import url('https://fonts.googleapis.com/css?family=Source Sans Pro:300,400,600,700,400italic,700italic&subset=latin');
^
Can't resolve './https://fonts.googleapis.com/css?family=Source Sans Pro:300,400,600,700,400italic,700italic&subset=latin' in ...

Summary A.Less - imports -> B.css - (B.css uses import via URL) -> Not functioning as expected

css webpack less

Answer 1

Answer №1

It is no longer the case that Less automatically resorts to a CSS import as a backup. Here is an alternative approach to try:

@import (css) url('https://fonts.googleapis.com/css?family=Source Sans Pro:300,400,600,700,400italic,700italic&subset=latin');

If you want to import the CSS without processing it

@import (inline) './A.css';

Alternatively, if you prefer to treat the CSS as an instruction and import and compile it as Less

@import (less) './A.css';

Answer 2

It is no longer the case that Less automatically resorts to a CSS import as a backup. Here is an alternative approach to try:

@import (css) url('https://fonts.googleapis.com/css?family=Source Sans Pro:300,400,600,700,400italic,700italic&subset=latin');

If you want to import the CSS without processing it

@import (inline) './A.css';

Alternatively, if you prefer to treat the CSS as an instruction and import and compile it as Less

@import (less) './A.css';

The issue of importing CSS files that themselves import other CSS files via URL is causing a problem

Answer №1

Similar questions

Remove the scrollbar from the iframe and instead display a scrollbar on the page in its place

What is a simple way to ensure that my image retains its square shape on a responsive design without having to use numerous media queries?

Modifying the Collapse Direction of Navigation in Bootstrap 4

The server-side rendering of a React, Webpack, and Node project is encountering issues due to the undefined 'window' object

What is the best method for reconstructing an npm package within my project?

Tips for converting numerical values to visual elements in a JQUERY slider for images

How to make QWebView background translucent

What causes *ngIf to display blank boxes and what is the solution to resolve this problem?

Struggling to locate the CSS needed to perfectly center my Wordpress lightboxes

Creating a custom HTML layout: A step-by-step guide

Clicking elements reveal but page height remains unchanged?

Changing the text during a reset process

What is the best way to overlay a video onto an image using HTML and CSS?

activate the bootstrap popover by double-clicking instead of a single click

Using jQuery and CSS to create a temporary placeholder for images that have varying sizes

Chrome browser alignment problems

How to Perfectly Center a Div using CSS in Next.js (slightly off-center)

Graphs vanish when they are displayed in concealed sections

An error has occurred in the Shadow Dom due to the inability to access the property 'style' of an

Ensuring that nested objects in an absolutely positioned element do not wrap, clear, or stack