create-react-app配置sass

1.sass的安装
 $ npm install --save node-sass-chokidar
2.package.json文件里的scripts属性里添加内容
//npm build项目的时候把sass转换为css
"build-css": "node-sass-chokidar src/ -o src/",
//监视文件,如果文件发生改变,就重新编译文件
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive", 
接下来我们来试一下
//在src下面创建一个test.scss的文件
$ npm run build-css
//我们看到在我们的src下面多了一个test.css,那说明就可以用了
//但是每次test.scss文件修改都build-css,这个很不友好,有没有实时监控的一些东西呢,有的,往下看
$ npm run watch-css
//如果我们看到css文件实时变化了,那说明我们的watch-css也是没问题的
//但是新的问题又来了,我们希望npm start的时候就进行scss的实时编译,我们继续优化
3.npm run 合并
npm install --save npm-run-all

//package.json文件里的scripts属性里添加内容,把start和build重构
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
"build": "npm-run-all build-css build-js",
//接下来我们执行npm start试一下把
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一。配置webpack文件1.npm install sass-loader node-sass --save-d...
    我叫傻先生阅读 1,978评论 0 0
  • This project was bootstrapped with Create React App. Belo...
    unspecx阅读 5,215评论 0 2
  • Sass&Gulp 一、sass介绍 (一) SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计...
    锋享前端阅读 1,521评论 0 3
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,481评论 1 32
  • (万尚学习会) 姓名:Matty 部门:业务部 组别:待定 【知~学习】 阅读《道盛和夫自传》第三章 【内容感悟分...
    黄科进阅读 477评论 0 0