作者:心茈天天开心启q | 来源:互联网 | 2022-12-03 16:44
我从一个月开始学习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
找到未解决的时发生@import
。sass-loader
例如使用时;所有导入都已解析(并连接),css-loader
甚至没有机会查找
@import
。