在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+css布局的图片连续滚动js实现代码
May 04 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
jquery实现的用户注册表单提示操作效果代码分享
Aug 28 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
Sep 14 Javascript
Javascript typeof与instanceof的区别
Oct 18 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
vue父子组件通信的高级用法示例
Aug 29 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
Nov 14 Javascript
Javascript原型链及instanceof原理详解
May 25 Javascript
vue渲染方式render和template的区别
Jun 05 Javascript
vue组件中实现嵌套子组件案例
Aug 31 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
分享最受欢迎的5款PHP框架
2014/11/27 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
php中文语义分析实现方法示例
2019/09/28 PHP
深入理解JavaScript系列(15) 函数(Functions)
2012/04/12 Javascript
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
js格式化时间小结
2014/11/03 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
js实现4个方向滚动的球
2017/03/06 Javascript
nodejs开发——express路由与中间件
2017/03/24 NodeJs
jQuery自动或手动图片切换效果
2017/10/11 jQuery
vue采用EventBus实现跨组件通信及注意事项小结
2018/06/14 Javascript
vue.js 中使用(...)运算符报错的解决方法
2018/08/09 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
2018/11/27 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
JavaScript迭代器的含义及用法
2019/06/21 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
Python 元类实例解析
2018/04/04 Python
Python读取txt某几列绘图的方法
2018/10/14 Python
Python进阶之@property动态属性的实现
2019/04/01 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
创业计划书中要认真思考的问题
2013/12/28 职场文书
初中数学教学反思
2014/01/16 职场文书
人代会简报
2015/07/21 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python
js作用域及作用域链工作引擎
2022/07/07 Javascript