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

Question

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.

Answer 1

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.