在create-react-app中使用sass
1、安装node-sass-chokidar到依赖
npm install --save node-sass-chokidar
2、安装node-sass
npm install node-sass
3、在项目的package.json中,将以下行添加到scripts中:
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
4、使用
创建xx.scss文件,或者将初始化项目中的src/App.css重命名为src/App.scss,在终端运行
npm run watch-css
watch-css将在src子目录中找到每个Sass文件,并在其旁边创建一个相应的CSS文件
5、同时编译sass和运行项目
(1)可以打开两个终端,一个终端执行npm start运行项目,另一个终端执行npm run watch-css进行同步编译
(2)使用npm-run-all工具,执行npm install npm-run-all –save-dev安装,在在项目的package.json中,将以下行添加到scripts中:
"run-double": "npm-run-all -p watch-css start"
在终端执行npm run run-double,可同时运行项目和编译sass
*注:”run-double”这个名称可改为自己喜欢的名称
6、推荐
更改create-react-app的webpack配置,一般使用react-app-rewired来处理