React的Sass配置

一、更新react-scripts或者create-react-app

npm install react-scripts@latest --save

或者

npm install -g create-react-app@latest

二、在已有项目下安装node-sass

npm install node-sass -D

有个小坑，node-sass版本不同对node的要求不一样。

Node 11 ----->  node-sass 4.10

Node 10 ---->  node-sass 4.9+

Node 8   -----> node-sass 4.5.3+

 

 一、安装sass-loader和node-sass依赖

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

 

二、打开react的webpack配置

node_modules/react-scripts/config/webpack.config.dev.js

    找到module下的rules，然后找到最后一个配置，修改成如下的样子

{

    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']

}

配置完成 ，正常引入 scss 文件就可以了