javascript - Webpack 4 中 css-loader 的 importLoaders 选项到底是什么？

Question

我从一个月开始就开始学习 Webpack 4。我想做的大多数事情都很好，但是 css-loader 的这个 importLoaders 选项对我来说仍然是个谜。其官方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'
  ]
}

还有我的 vendors.scss，例如不同类型的导入:

@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";

基本上我希望 sass-loader 完成它通常的工作，而 postcss 对图像文件进行一些操作。

那么什么时候以及为什么我应该为 importLoaders 选项使用 0/1/2/n？
它对我上面的 @imports 有什么影响？

有人可以像文档中那样更详细地向我解释吗？
提前致谢。

Answer 1

经过更多搜索后发现，我不是唯一对如何正确使用此选项感到困惑的人。 css-loader 的 GitHub 存储库中的问题:

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

另请参阅@guidobouman 的精彩解释:
https://github.com/webpack-contrib/css-loader/issues/228#issuecomment-312885975

所以这回答了我的问题(按字面引用):

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.