我有Angular组件。每个组件的文件夹中都有一个CSS文件。我使用SCSS预处理程序,因此我需要使Webpack只是编译SCSS文件而不将它们合并为一个。例如
Before:
src
|-app
|_component1
| component1.html
| component1.ts
| component1.scss
|
|_component2
| component2.html
| component2.ts
| component2.scss
After:
src
|-app
|_component1
| component1.html
| component1.ts
| component1.scss
| component1.css
|
|_component2
| component2.html
| component2.ts
| component2.scss
| component2.css
答案 0 :(得分:3)
您可以通过在Webpack中进行以下配置来实现此目的
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
{
...
plugins: [
...
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
...
],
module: {
rules: [
...
{
test: /\.(css|scss)$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
}
...
]
}
...
};
答案 1 :(得分:0)
您不必在Webpack中进行操作,我什至不知道是否可行。
安装node-sass
,然后将其添加到package.js
"scripts": {
"test": "blah blah blah",
"sass": "node-sass ./src/app/ --output ./src/app/ --recursive false -w"
}
详细了解如何使用它node-sass
答案 2 :(得分:0)
您可以使用mini-css-extract-plugin来完成
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
],
module: {
rules: [{
test: /\.scss$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
minimize: true,
sourceMap: true
}
},
{
loader: "sass-loader"
}
]
}
]
}
您可以查看完整的代码here