在create-react-app中使用sass的方法示例


Posted in Javascript onOctober 01, 2018

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

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

Javascript 相关文章推荐
用Div仿showModalDialog模式菜单的效果的代码
Mar 05 Javascript
js 文件引入实现代码
Apr 23 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
Oct 18 Javascript
判断某个字符在一个字符串中是否存在的js代码
Feb 28 Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 Javascript
一个Vue页面的内存泄露分析详解
Jun 25 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 Javascript
es6函数之尾调用优化实例分析
Apr 25 Javascript
JS写滑稽笑脸运动效果
May 28 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 #Javascript
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 #Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 #Javascript
angularJs中$scope数据序列化的实例
Sep 30 #Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 #Javascript
mpvue项目中使用第三方UI组件库的方法
Sep 30 #Javascript
mpvue将vue项目转换为小程序
Sep 30 #Javascript
You might like
php GD绘制24小时柱状图
2008/06/28 PHP
yii的CURD操作实例详解
2014/12/04 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
php测试kafka项目示例
2020/02/06 PHP
jquery multiSelect 多选下拉框
2010/07/09 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
2016/02/17 Javascript
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
最全的JavaScript开发工具列表 总有一款适合你
2017/06/29 Javascript
javascript字体颜色控件的开发 JS实现字体控制
2017/11/27 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
理解Python中函数的参数
2015/04/27 Python
Python 文件管理实例详解
2015/11/10 Python
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
Python线性回归实战分析
2018/02/01 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
Python之Class&Object用法详解
2019/12/25 Python
关于初始种子自动选取的区域生长实例(python+opencv)
2020/01/16 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
2020/05/11 Python
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
Osklen官方在线商店:巴西服装品牌
2019/04/25 全球购物
车辆维修工自我评价怎么写
2013/09/20 职场文书
电气工程及其自动化自我评价四篇
2013/09/24 职场文书
汉语言文学毕业生求职信
2013/10/01 职场文书
幼儿园毕业园长感言
2014/02/24 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
升职自荐信怎么写
2015/03/05 职场文书
Python中使用ipython的详细教程
2021/06/22 Python
Go语言编译原理之源码调试
2022/08/05 Golang