我有 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
最佳答案
您可以通过在您的 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"]
}
...
]
}
...
};
关于javascript - 如何将每个 scss 文件编译到其自己的文件夹中而不将它们合并为一个?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57468252/