热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Webpack4中css-loader的importLoaders选项到底是什么?

如何解决《Webpack4中css-loader的importLoaders选项到底是什么?》经验,为你挑选了1个好方法。

我从一个月开始学习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上述影响如何?

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



1> ARS81..:

经过更多搜索后,结果发现我并不是唯一对如何正确使用此选项感到困惑的人。来自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找到未解决的时发生@importsass-loader例如使用时;所有导入都已解析(并连接),css-loader甚至没有机会查找 @import


推荐阅读
author-avatar
心茈天天开心启q
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有