在create-react-app建立的應用中配置Sass

使用 create-react-app 配置 react 開發環境，像下面這樣，就能夠構建一個新的 react 單頁面應用，很是方便。

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

可是如今的 create-react-app（react.15.6.1） 去掉了默認支持Sass等預處理器，官方文檔說明，有如何配置預處理器，若是咱們要使用預處理器時，就須要咱們本身來配置，在按着官方文檔進行配置時，npm start 是有效果的，可是當我改動 scss 文件時，就會報錯。而後就在網上查找了一些相關配置，發現這樣也是能夠的：

1. 安裝依賴

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

1. 在node_modules/react-scripts/config下找到 webpack.config.dev.js 文件，在 exclude 中添加 /.scss$/,
2. 並在loaders中添加一項：

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

像這樣：

至此，Sass 就配置好了。

注意，咱們只是修改了 webpack.config.dev.js ,若是要在生產環境中生效，須要在webpack.config.prod.js作一樣的配置。