文档章节

利用npm实现scss的自动编译

 说不通的执拗
发布于 2016/12/09 17:18
字数 316
阅读 70
收藏 1

#npm实现scss自动编译 利用npm中--watch开启自动监测,只要ctrl+s自动保存并将scss文件转译为css文件

以下说一下使用步骤: ####1. 安装node和npm ####2. 安装ruby

SASS是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样使用。只是必须先安装Ruby,然后再安装SASS。

####3.安装sass

假定你已经安装好了Ruby,接着在命令行输入下面的命令:

gem install sass

####4.下面开始做实例,新建一个demo文件,文件内分别有scss文件夹和css文件夹,并在scss文件新建一个demo.scss文件 ####5.在demo目录下右击,选择git bash here 弹出npm框 ####6.开始监测,在npm里面输入“sass --watch scss/demo.scss:css/demo.css”,回车,这是打开css文件,发现自动多了一个css文件

sass --watch sass/demo.scss:css/demo.css

####7.这时无论在demo.scss文件内编写,只要ctrl+s就会自动保存并在css文件内转译

也可以结合Package.json 写一下依赖及信息Package.json详解

© 著作权归作者所有

共有 人打赏支持
粉丝 0
博文 4
码字总数 2780
作品 0
西城
私信 提问
node 使用 gulp 创建本地服务

打开终端全局安装 gulp 模块 npm install -g gulp //全局安装 gulp(轻量级自动化项目构建工具) cd 进入到项目文件夹,可以到看到 package.json 配置文件: { "name": "ionic-project", "ve...

Jack088
2015/03/18
0
0
Win10 下 Nodejs+Angular2+bootstrap4 开发环境搭建

安装Node.js 1,下载安装包并安装 https://nodejs.org/en/download/ 2,查看node和npm的版本信息 3,查看和更新包安装路径 --查看 npm config get prefix npm config get cache --更新 npm ...

mybabe0312
2017/04/06
0
0
Gulp、Webpack区别

在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始逐渐渗透到“大前端”的开发中。前端开发过程越来越繁琐,当今越来越多的网站已...

追风_
01/02
0
0
在create-react-app中使用sass

Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。Sass是一个将脚本解析成CSS的脚本语言,即SassScript。S...

Originalee
04/04
0
0
动态样式语言Scss&Less介绍与区别

一. Sass/Scss&Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,语法跟css一样(但多了些功能),比css好写,而且更容易阅读。Sass语法类似与Haml,属于缩排语法(...

随影求是
2012/03/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

延迟队列实现精准的订单超时取消--自我记录备份

订单的超时取消很多系统采用定时任务,实际上达不到要求。我用的是延迟队列,但缺点是只实现了基于jvm的,分布式采用的是修改之前去查询订单状态,以及分布式锁获取的方式来控制,这样获得锁...

checkboxMan
36分钟前
1
0
storm 环境搭建

1.下载解压 下载地址:http://storm.apache.org/downloads.html #下载wget https://www-us.apache.org/dist/storm/apache-storm-1.2.2/apache-storm-1.2.2.tar.gz#解压tar -zxf apache......

MrPei
50分钟前
1
0
Python Base - 读写文件,字符串拼接,单引号

字符转义 读写文件cvs 字符串拼接,替换 import csvcsv_file_name = 'cardbin.csv'# insert into `card_bin_code` (name_of, code_of, card_no_prefix, bank_code) values ('中国银行......

园领T
51分钟前
1
0
基于JQUERY BOOTSTRAP 最简单的loading遮罩层

<%--loading遮罩层--%><div class="modal fade" id="loadingModal" backdrop="static" keyboard="false">   <div style="width: 200px;height:20px; z-index: 20000; position: abs......

颖辉小居
52分钟前
1
0
springboot+kafka

1,首先springboot对kafka的支持也很好,同样是在配置文件中配置好参数,然后就可以直接使用。先说一下,很简单,,,不要怕 2,我用的依赖是 <dependency> <groupId>org.springframewor...

我真是小菜鸡
56分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部