白羊的空间

React 配置 SASS

学习react时，在项目中使用sass编辑样式，记录配置方法:

#安装

1
npm install sass-loader node-sass --save-dev

#配置
打开react的webpack配置,找到module下的rules，然后找到最后一个配置，修改成如下的样子

1
2
3
4
5
6
7
8
9
10
11
12
{

    exclude: [/\.js$/,/\.html$/,/\.json$/,/\.scss$/],
    loader: require.resolve('file-loader'),
    options: {
            name: 'static/media/[name].[hash:8].[ext]',
        },
},
{
    test:/\.scss$/,
    loaders:['style-loader','css-loader','sass-loader']
}

注意，我们只是修改了 webpack.config.dev.js, 如果要在生产环境中生效，需要在webpack.config.prod.js做同样的配置。

React