I have Angular components. Each component has a CSS file in its folder. I use SCSS preprocessor, so I need to make Webpack just compile SCSS files without merging them into one. For example
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
you can achieve this by following configuration in your 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"]
}
...
]
}
...
};
You don't have to do it in a webpack and I don't even know if it's possible. Install node-sass
and then add it to package.js
"scripts": {
"test": "blah blah blah",
"sass": "node-sass ./src/app/ --output ./src/app/ --recursive false -w"
}
Read more how to use it node-sass
You can use mini-css-extract-plugin to do that
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"
}
]
}
]
}
You can view full code here
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.