在create-react-app中使用sass的方法示例
Sass（英文全称：SyntacticallyAwesomeStylesheets）是一个最初由HamptonCatlin设计并由NatalieWeizenbaum开发的层叠样式表语言。Sass是一个将脚本解析成CSS的脚本语言，即SassScript。Sass包括两套语法。最开始的语法叫做“缩进语法”，与Haml类似，使用缩进来区分代码块，并且用回车将不同规则分隔开。而较新的语法叫做“SCSS”，使用和CSS一样的块语法，即使用大括号将不同的规则分开，使用分号将具体的样式分开。通常情况下，这两套语法通过.sass和.scss两个文件扩展名区分开。相信每个前端开发者都对这种css预处理器有所耳闻。
不管你是刚使用Reactjs或者是Reactjs的老司机，你们一定都听说过create-react-app这个脚手架，而从create-react-app的官方文档中，我们可以看到他们暂时还不支持直接导入LESS或者Sass。但是通过一些配置，我们还是可以从官方脚手架中使用sass/scss/less的。
1、安装node-sass-chokidar到依赖
npminstall--savenode-sass-chokidar
2、安装node-sass
npminstallnode-sass
3、在项目的package.json中，将以下行添加到scripts中:
"build-css":"node-sass-chokidarsrc/-osrc/", "watch-css":"npmrunbuild-css&&node-sass-chokidarsrc/-osrc/--watch--recursive",
4、使用
创建xx.scss文件，或者将初始化项目中的src/App.css重命名为src/App.scss，在终端运行
npmrunwatch-css
watch-css将在src子目录中找到每个Sass文件，并在其旁边创建一个相应的CSS文件
5、同时编译sass和运行项目
（1）可以打开两个终端，一个终端执行npmstart运行项目，另一个终端执行npmrunwatch-css进行同步编译
（2）使用npm-run-all工具，执行npminstallnpm-run-all--save-dev安装,在在项目的package.json中，将以下行添加到scripts中:
"run-double":"npm-run-all-pwatch-cssstart"
在终端执行npmrunrun-double,可同时运行项目和编译sass
*注："run-double"这个名称可改为自己喜欢的名称
6、推荐
更改create-react-app的webpack配置,一般使用react-app-rewired来处理
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。