Webpack启用Sass编译

一、安装依赖

npm i sass-loader node-sass -D


二、webpack配置

module: {rules: [{test: /\.scss$/,use: [&＃39;style-loader&＃39;, &＃39;css-loader&＃39;, &＃39;sass-loader&＃39;]}]
}


webpack解析sass文件一共需要三种插件&＃xff0c;sass-loader,css-loader,style-loader。****

配置成功测试

配置到这里&＃xff0c;sass就已经正常可用了。可以尝试直接把项目中的css文件改下后缀名为.scss&＃xff0c;然后再引用该文件的地方改下新的文件名称&＃xff0c;重启项目就能看到效果了。

三、启用模块化

该配置只针对于React项目&＃xff0c;用不到可以直接跳过。

React中因为没有指令概念&＃xff0c;所以要想实现vue中的scoped功能完成模块化使用css样式&＃xff0c;必须在rules中作如下配置&＃xff1a;

{test: /\.scss$/,use: [&＃39;style-loader&＃39;,&＃39;css-loader?modules&localIdentName&＃61;[path][name]-[local]-[hash:5]&＃39;,&＃39;sass-loader&＃39;]
}


其中css-loader后拼接的modules意为启用模块化&＃xff0c;后边的一些参数为自定义的模块化类名。

四、坑点

1.修改配置文件

修改webpack配置文件之后必须重启才能生效

2.loader解析顺序

webpack解析时会按照数组从后向前的顺序进行解析&＃xff0c;因此&＃xff0c;插件的顺序不能写反了。

use: [&＃39;style-loader&＃39;, &＃39;css-loader&＃39;, &＃39;sass-loader&＃39;]


以上配置&＃xff0c;会依次使用sass-loader、css-loader、style-loader进行解析

END