Webpack启用Sass编译

一、安装依赖

npm i sass-loader node-sass -D

二、webpack配置

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

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

配置成功测试

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

三、启用模块化

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

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

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

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

四、坑点

1.修改配置文件

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

2.loader解析顺序

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

use: ['style-loader', 'css-loader', 'sass-loader']

以上配置，会依次使用sass-loader、css-loader、style-loader进行解析

END