Webpack配置编译SCSS
现在框架都提供了一套完整的编译配置，比如Vue;
有时只是需要编译scss文件，在使用gulp的方式时遇到了无法识别SCSS的~语法的问题，其实也可以通过一些配置来解决，只是觉得既然webpack是主流，那不妨总结一套专门编译scss的配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const path = require("path")
module.exports = {
entry: './packages/src/main.scss',
output: {
path: path.resolve(__dirname, 'lib')
},
module: {
rules: [
// Extracts the compiled CSS from the SASS files defined in the entry
{
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
// Interprets CSS
loader: "css-loader",
options: {
importLoaders: 2
}
},
{
loader: 'sass-loader' // 将 Sass 编译成 CSS
}
]
}
],
},
plugins: [
// Where the compiled SASS is saved to
new MiniCssExtractPlugin({
filename: 'index.css',
allChunks: true,
})
],
optimization: {
minimizer: [
// 有时候webpack会默认优化z-index值，设置默认不优化
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
safe: true
}
})
]
},
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
...
"devDependencies": {
"css-loader": "^2.1.0",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.11.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"sass-loader": "^7.1.0",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.2.1"
}
...
}
如果你想删除编译后的文件中的main.js, 可以使用这个包：webpack-fix-style-only-entries
示例代码：
const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries")
...
plugins: [
new FixStyleOnlyEntriesPlugin(),
...
],
...
觉得作者写得不错？不妨轻击下方按钮~
