在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 相关文章推荐
javascript[js]获取url参数的代码
Oct 17 Javascript
js修改table中Td的值(定义td的单击事件)
Jan 10 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
May 02 Javascript
使用js完成节点的增删改复制等的操作
Jan 02 Javascript
jQuery不使用插件及swf实现无刷新文件上传
Dec 08 Javascript
javascript基于DOM实现权限选择实例分析
May 14 Javascript
js实现新浪微博首页效果
Oct 16 Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 Javascript
webpack 单独打包指定JS文件的方法
Feb 22 Javascript
js实现圆形显示鼠标单击位置
Feb 11 Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 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实现多级树型菜单
2006/10/09 PHP
PHP变量的定义、可变变量、变量引用、销毁方法
2013/12/20 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
2018/06/10 Javascript
webpack 代码分离优化快速指北
2019/05/18 Javascript
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
Python基于csv模块实现读取与写入csv数据的方法
2018/01/18 Python
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
python检测IP地址变化并触发事件
2018/12/26 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
Python调用C语言程序方法解析
2020/07/07 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
Python爬虫实战案例之爬取喜马拉雅音频数据详解
2020/12/07 Python
Python数据分析库pandas高级接口dt的使用详解
2020/12/11 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
澳大利亚珠宝商:Shiels
2019/10/06 全球购物
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
名词解释型面试题(主要是网络)
2013/12/27 面试题
职业生涯规划书前言
2014/04/15 职场文书
计生工作先进事迹
2014/08/15 职场文书
2015年行政部工作总结
2015/04/28 职场文书
详解OpenCV曝光融合
2022/04/29 Python