在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 相关文章推荐
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
Dec 25 Javascript
JavaScript Cookie的读取和写入函数
Dec 08 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 Javascript
javascript的document.referrer浏览器支持、失效情况总结
Jul 18 Javascript
深入探密Javascript数组方法
Jan 08 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
Jun 10 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
Sep 19 Javascript
JavaScript Canvas实现验证码
Aug 02 Javascript
使用layer模态框给新页面传值的方法
Sep 27 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
Dec 19 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
详解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中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
JavaScript获取路径设计源码
2014/05/22 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
AngularJS进行性能调优的7个建议
2015/12/28 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
angular4自定义组件详解
2017/09/28 Javascript
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
解决webpack dev-server不能匹配post请求的问题
2018/08/24 Javascript
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
vue项目刷新当前页面的三种方法
2018/12/04 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
python求最大公约数和最小公倍数的简单方法
2020/02/13 Python
python的setattr函数实例用法
2020/12/16 Python
data:image data url 文件转为Blob上传后端的方法
2019/07/16 HTML / CSS
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
资源工程专业毕业生求职信
2014/02/27 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
药店收银员岗位职责
2015/04/07 职场文书
2015年基层党支部工作总结
2015/05/21 职场文书
导游词之湖北梁子湖
2019/11/07 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers
教你怎么用Python处理excel实现自动化办公
2021/04/30 Python
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android