我正在将SASS添加到我的webpack配置中。我已经有了一个CSS加载器规则，看起来像下面的一组规则。..
rules: [
{
test: /\.css$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
// https://webpack.js.org/loaders/css-loader#importloaders
importLoaders: 1
}
},
"postcss-loader"
]
},
{
test: /\.ts(x?)$/i,
loader: "ts-loader",
include: path.resolve(__dirname, "src")
}
]我想介绍SASS，所以我尝试在CSS加载器之前添加它，因为SASS转换为CSS。..
rules: [
{
test: /\.css$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
// https://webpack.js.org/loaders/css-loader#importloaders
importLoaders: 2
}
},
"postcss-loader"
]
},
{
test: /\.scss$/i,
loader: "sass-loader"
},
{
test: /\.ts(x?)$/i,
loader: "ts-loader",
include: path.resolve(__dirname, "src")
}
]根据文档，我还将importLoaders更改为2，以便css-loader允许sass-loader。
不过，这似乎行不通。看起来CSS加载器并没有拾取由SASS加载器创建的CSS。我得到以下错误。..
./node_modules/bootstrap/scss/bootstrap。scss 228 KiB [构建] [1错误]
./node_modules/bootstrap/scss/bootstrap中出错。scss 1：0模块解析失败：意外的字符“@”（1：0）使用以下加载程序处理文件：* ./node_modules/sass-loader/dist/cjs.js您可能需要一个额外的加载器来处理这些加载器的结果。
@charset“UTF-8”;|/！| Bootstrap v5。2.3（https://getbootstrap.com/）@。/src/index.tsx 1：0-39
现在，如果我把这些都作为SASS的一个大规则，并使用这些相同的加载器，那么它们都可以工作。..
rules: [
{
test: /\.scss$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
// https://webpack.js.org/loaders/css-loader#importloaders
importLoaders: 2
}
},
"postcss-loader",
"sass-loader"
]
},
{
test: /\.ts(x?)$/i,
loader: "ts-loader",
include: path.resolve(__dirname, "src")
}
]但是现在我丢失了CSS规则，重新添加它会创建一个基本上与SASS规则相同的规则-加载程序。
为什么我不能把这些规则分开？我有CSS和SASS。
1条答案
按热度按时间mwkjh3gx1#
想要将一个
rule生成的文件传递给另一个rule是行不通的。它们唯一的工作是处理代码中找到的匹配模块，它们对生成的文件不做任何事情，这有点像plugins所做的，但更多的是为了最小化，代码分割。关于rules的问题：创建modules时与请求匹配的规则数组。这些规则可以修改模块的创建方式。
请注意 “when modules are created”，而不是在创建模块之后，这是通过传递一个规则来实现的。
importLoader是CSS中处理@import的一种方式，而不是控制rules顺序：允许启用/禁用或设置在
@importat-规则、CSS模块和ICSS导入的CSS加载器之前应用的加载器数量，即。即@import/composes/@value value from './values.css'/等。现在，由于任何CSS代码都是有效的SCSS代码，您可以简单地将这两个文件合并到一个规则中，将它们视为SCSS文件。您可以通过将规则
testRegExp更改为：