CODEWITHSUNDEEP
javascriptwebpacksass
szegheo
szegheo

Reputation: 4435

What is exactly the importLoaders option of css-loader in Webpack 4?

I've started learning Webpack 4 since a month. Most things I wanted to do is working great but this importLoaders option of css-loader is still a mystery for me. Its official documentation is poor and I haven't found any well explained writing about it.

My use case is very close to the one presented in the documentation:

{
  test: /\.s?css$/,
  use: [
    ExtractCssChunks.loader,
    {
      loader: 'css-loader',
      options: {
        importLoaders: 2, // 0 => no loaders (default); 1 => postcss-loader; 2 => postcss-loader, sass-loader
        import: true, // is true by default, but should I use instead false here???
        url: false // let postcss do it
      }
    },
    'postcss-loader',
    'sass-loader'
  ]
}

And my vendors.scss for example with different kind of imports:

@charset 'UTF-8';

// Google fonts
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Dosis:200,400,500,600');

//FontAwesome (from node_modules)
@import "~@fortawesome/fontawesome-svg-core/styles";

// Site theme
@import "theme/index";

Basically I want sass-loader to do its usual job and postcss to do some manipulation with image files.

So when and why should I use 0/1/2/n for importLoaders option?
How is it affected to my @imports above?

Could someone explain it to me more detailed like in the docs?
Thanks in advance.

Upvotes: 31

Views: 12157

Answers (1)

szegheo
szegheo

Reputation: 4435

After more searching it turned out that I'm not the only one confused about how to use this option correctly. Issues from the GitHub repo of css-loader:

https://github.com/webpack-contrib/css-loader/issues/765

Also see @guidobouman excellent explanation here:
https://github.com/webpack-contrib/css-loader/issues/228#issuecomment-312885975

So this answers my question (quoted literally):

importLoaders only has effect on unresolved @imports. So when using postCSS with nextCSS (no @import resolver) you'll want to set importLoaders. This way nextCSS will also be applied to imported .css files. But when using sass, it already handles the @import statements, so no importLoaders is required.

So, this only happens when css-loader finds an unresolved @import. When using sass-loader for example; All imports are resolved (and concatenated) before css-loader even gets the chance to look for an @import.

Upvotes: 42

Related Questions