1

I was learning about css-loader in webpack, the defination says that

The css-loader interprets @import and url() like import/require()and will resolve them. What does it mean, In an example in the documentaion there is

url(image.png) => require('./image.png')

So my question is will it convert url('./image.png') to require('image.png')

For example in a css file if i have background property as

#selector{
   background:url('./image.png'); //this is a vlid css property
}

will the above style converted like 

#selector{
   background:require('./image.png'); // this is not a valid css property
}

if this is how the conversion take place than background:require('./image.png') is not valid css, is there something wrong in my understanding, may be i'm not getting what css-loader does actually. I went through the documentation of css-loader.

can anyone explain where i am wrong.

user8989
  • 580
  • 2
  • 6
  • 21

1 Answers1

1

please read about css-loader resolve urls https://webpack.js.org/loaders/css-loader/#url

if its just about understanding, webpack is fully js based. that means there have to be a way to check does the file exist, copy file or step in further actions. in the endfile it's simply css syntax with 'replaced/resolved' URL. 

background:url('wp-content/themes/yours/assets/image.png');

check also https://www.npmjs.com/package/resolve-url-loader

tfrei
  • 181
  • 1
  • 8
  • What this lines, The css-loader interprets @import and url() like import/require() and will resolve them – user8989 Jun 10 '20 at 03:33
  • import/require is way to load files in js. webpack is written in js. everything you will import in webpack will be loaded/resolved by webpack because thats necessary for bundling. you load css, so the urls have to be resolved for js to write it back in css with the correct path. – tfrei Jun 10 '20 at 14:36
  • so will css-loader convert url() into require(),and then webpack resolve the require statement,This is how it will work – user8989 Jun 11 '20 at 03:53