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

Posted 2023-03-07

【中文标题】Webpack 4 中 css-loader 的 importLoaders 选项到底是啥？

【英文标题】：What is exactly the importLoaders option of css-loader in Webpack 4?Webpack 4 中 css-loader 的 importLoaders 选项到底是什么？

【发布时间】：2019-03-03 19:39:30

【问题描述】：

我从一个月开始就开始学习 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 做一些图像文件的操作。

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

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

【参考方案1】：

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

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

还可以在这里查看@guidobouman 的精彩解释：https://github.com/webpack-contrib/css-loader/issues/228#issuecomment-312885975

所以这回答了我的问题（字面意思）：

importLoaders 仅对未解析的@imports 有效。所以在使用的时候 你要设置的带有 nextCSS 的 postCSS（没有 @import 解析器） importLoaders。这样 nextCSS 也将应用于导入的.css 文件。但是在使用 sass 时，它已经处理了@import 语句， 所以不需要importLoaders。

所以，这只发生在css-loader 找到未解决的@import 时。 例如使用sass-loader 时；所有导入都已解决（并且 连接）之前css-loader 甚至有机会寻找一个 @import.