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

Question

我从一个月开始学习Webpack 4。我想做的大多数事情都工作得很好，但是这个importLoaders选择css-loader对我来说还是个谜。它的官方文档很差，而且我还没有找到关于它的详细解释。

我的用例与文档中介绍的用例非常接近：

{
  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'
  ]
}

而我的vendor.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图像文件进行一些操作。

那么什么时候以及为什么我应该使用0/1/2 / n作为importLoaders选项呢？
对我的@imports上述影响如何？

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

Answer 1

经过更多搜索后，结果发现我并不是唯一对如何正确使用此选项感到困惑的人。来自GitHub仓库的问题css-loader：

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

另请参阅@guidobouman此处的出色说明：https :
//github.com/webpack-contrib/css-loader/issues/228#issuecomment-312885975

因此，这回答了我的问题（字面意思）：

importLoaders仅对未解决@import的起作用。因此，将postCSS与nextCSS（无@import解析器）一起使用时，您需要设置 importLoaders。这样，nextCSS也将应用于导入的.css 文件。但是当使用sass时，它已经处理了@import语句，因此importLoaders不需要。

因此，这仅在css-loader找到未解决的时发生@import。sass-loader例如使用时；所有导入都已解析（并连接），css-loader甚至没有机会查找 @import。