2019/3/11更新
從react-scripts 2.0.0開始就支持直接配置sass了！??不用再eject自己配置webpack了！
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?creact-react-app官網
一、更新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創(chuàng)建的工程文件不像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爽多了，比較符合程序語言的思維。
