文档章节

利用npm实现scss的自动编译

 说不通的执拗
发布于 2016/12/09 17:18
字数 316
阅读 48
收藏 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
在create-react-app中使用sass

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

Originalee
04/04
0
0
Gulp、Webpack区别

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

追风_
01/02
0
0
【转】Why npm Scripts?

翻译原文:http://www.cnblogs.com/zldream1106/p/5204599.html 英文原文:https://css-tricks.com/why-npm-scripts/ 以下是访客Damon Bauer发布的一篇文章。近来直接使用node package提供的...

iNiL0119
2016/11/04
61
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

java并发备忘

不安全的“先检查后执行”,代码形式如下: if(条件满足){ //这里容易出现线程安全问题//doSomething}else{//doOther} 读取-修改-写入 原子操作:使用CAS技术,即首先从V中读取...

Funcy1122
今天
0
0
SpringBoot2.0 停机

最近新建了个SpringBoot2.0的项目,因为原来一直使用的是传统的Tomcat部署war包的形式,所以这次SpringBoot内置Tomcat部署jar包的时候遇到了很多问题。其中一个就是因为没有外置的Tomcat容器...

Canaan_
昨天
0
1
Confluence 6 外部参考

一个外部参考的意思是任何站点链接到你 Confluence 的实例。任何时候当 Confluence 的用户单击这个外部链接的时候,Confluence 可以记录这次单击为参考。 在默认的情况下,外部链接的参考链接...

honeymose
昨天
0
0
Android中的设计模式之抽象工厂模式

参考 《设计模式解析》 第十一章 Abstract Factory模式 《设计模式:可复用面向对象软件的基础 》3.1 Abstract Factory 抽象工厂 对象创建型模式 《Android源码设计模式解析与实战》第6章 创...

newtrek
昨天
0
0
Redis | 地理空间(GEO)的一个坑

Redis的地理空间(Geo)是个好东西,轻轻松松的就可以把地图描点的问题处理了, 最近却遇到一个坑...Redis采用的Msater-Slave模式, 运用GEORADIUS在salve读取对应的数据,新增了从节点但是从不返...

云迹
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部