Question

一个月以来，我已经开始学习Webpack 4。我想做的大多数事情都运转良好，但是importLoaders的{{1}}选项对我来说仍然是个谜。它的官方documentation较差，我还没有找到任何有关它的详尽解释。

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

css-loader

例如，我的vendor.scss具有不同类型的导入：

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

基本上，我希望@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有什么影响？

有人可以像文档中那样向我详细解释吗？
预先感谢。

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仅对未解决的@import有效。所以当使用   您要设置的带有nextCSS（没有@import解析器）的postCSS   importLoaders。这样，nextCSS也将应用于导入的.css   文件。但是当使用sass时，它已经处理了@import语句，   因此不需要importLoaders。

因此，只有在css-loader找到未解决的@import时才会发生这种情况。   例如，使用sass-loader时；所有进口均已解决（并且   级联）css-loader之前甚至有机会寻找   @import。

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

1 个答案: