在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作一样的配置。