Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。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到依赖

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来处理

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
create-react-app使用sass

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“在create-react-app中使用sass的方法示例”

暂无“在create-react-app中使用sass的方法示例”评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。