在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做同样的配置。

posted @ 2017-07-04 20:31  yangrenmu  阅读(6910)  评论(3编辑  收藏  举报