在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. 找到 webpack.config.dev.js 文件,在 exclude 中添加 <code>/.scss$/,</code>
  2. 并在loaders中添加一项:
{
        test: /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader'],
},

像这样:



至此,Sass 就配置好了。

注意,我们只是修改了 <code>webpack.config.dev.js</code> ,如果要在生产环境中生效,需要在<code>webpack.config.prod.js</code>做同样的配置。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 13,844评论 0 21
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 12,542评论 7 35
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 10,830评论 1 32
  • 前两部分我们已经完成了博客页面的展示和后台页面的展示: React技术栈+Express+Mongodb实现个人博...
    SamDing阅读 10,791评论 1 12
  • 不谈婚姻,只恋爱的我你要不要.
    一生热爱___阅读 503评论 2 0