2019/3/11更新
从react-scripts 2.0.0开始就支持直接配置sass了！👇不用再eject自己配置webpack了！
一、更新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 MODULE，则需要将*.scss文件改为*.module.scss。
题外话2。简书为什么修改老文章不能用markdown？气死 😤
React提供的脚手架create-react-app创建的工程文件不像vue那种暴露出webpack来，所以添加依赖需要拐个弯。
为了配置sass需要按以下步骤进行:
一、安装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文件了
比如手脚架的App.css就改成App.scss后
最后，sass用起来比css爽多了，比较符合程序语言的思维。
