文档章节

利用npm实现scss的自动编译

 说不通的执拗
发布于 2016/12/09 17:18
字数 316
阅读 41
收藏 1
点赞 0
评论 0

#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
博文 3
码字总数 2780
作品 0
西城
node 使用 gulp 创建本地服务

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

Jack088 ⋅ 2015/03/18 ⋅ 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

Gulp、Webpack区别

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

追风_ ⋅ 01/02 ⋅ 0

动态样式语言Scss&Less介绍与区别

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

随影求是 ⋅ 2012/03/27 ⋅ 0

在create-react-app中使用sass

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

Originalee ⋅ 04/04 ⋅ 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 ⋅ 0

Ionic Mac 环境配置

Ionic Mac 环境配置 · 安装cordova之前要安装nodejs 会包含npm安装(npm是个包管理器),到官网下载https://nodejs.org/en/download/ 是个pkg包下载之后双击下载包运行然后 step by step,o...

anziguoer ⋅ 2016/03/10 ⋅ 0

Sass和LESS-动态CSS技术

一、简介 二、Sass/Scss的使用 变量 注释 中注释的作用包括帮助你组织样式、以后你看自己的代码时明白为什么这样写,以及简单的样式说明。但是,你也并不希望每个浏览网站源码的人都能看到所...

dhb_oschina ⋅ 2016/05/17 ⋅ 0

简单的LESS Tutorial

简单的LESS Tutorial 1. 什么是LESS? LESS是一种动态的CSS语言,更专业的称呼是CSS preprocessor。作为CSS的扩展语言,LESS可以让CSS文件逻辑上更清晰,从而更容易维护和更新。LESS是开源的,...

我为楚狂 ⋅ 2014/05/03 ⋅ 0

浅谈fis3与postcss

Fis3构建工具 Fis3的安装 npm install -g fis3 查看fis3 fis3 –v fi3构建工具新建文件夹 新建一个根目录 进入根目录输入fis3 init指令初始化 发布以及监听文件 指令:fis3 release –w –d...

杏sunshine ⋅ 2017/05/17 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

聊聊spring cloud gateway的LoadBalancerClientFilter

序 本文主要研究一下spring cloud gateway的LoadBalancerClientFilter GatewayLoadBalancerClientAutoConfiguration spring-cloud-gateway-core-2.0.0.RELEASE-sources.jar!/org/springfram......

go4it ⋅ 39分钟前 ⋅ 0

详解:Nginx反代实现Kibana登录认证功能

Kibana 5.5 版后,已不支持认证功能,也就是说,直接打开页面就能管理,想想都不安全,不过官方提供了 X-Pack 认证,但有时间限制。毕竟X-Pack是商业版。 下面我将操作如何使用Nginx反向代理...

问题终结者 ⋅ 46分钟前 ⋅ 0

002、nginx配置虚拟主机

一、nginx配置虚拟主机可分为三种方式,分别为: 1、基于域名的虚拟主机,通过域名来区分虚拟主机——应用:外部网站 2、基于端口的虚拟主机,通过端口来区分虚拟主机——应用:公司内部网站...

北岩 ⋅ 49分钟前 ⋅ 0

shell脚本之死循环写法

最近在学习写shell脚本,在练习if while等流程控制时,突然它们的死循环写法是怎么样的?经过百度与亲测记录如下: for死循环 #! /bin/bashfor ((;;));do date sleep 1d...

hensemlee ⋅ 51分钟前 ⋅ 0

苹果的ARKit2.0有多可怕,看了就知道

序言 ARKit主要由三部分组成: 跟踪(Tracking) 跟踪是ARKit的核心组件之一,其提供了设备在物理世界中的位置与方向信息,并对物体进行跟踪,如人脸。 2.场景理解(Scene Understanding) 场...

_小迷糊 ⋅ 52分钟前 ⋅ 0

5.1 vim介绍 5.2 vim移动光标 5.3 ,5.4vim一般模式下移动光标,复制粘贴

vim命令 vim是vi的一个升级版;vim可以显示文字的颜色 安装vim这一个包vim-enhanced 如果不知道安装包,可以使用 命令下面命令来查看vim命令是那个包安装的。 [root@linux-128 ~]# yum prov...

Linux_老吴 ⋅ 56分钟前 ⋅ 0

vim一般模式

vim 是什么 vim是什么 ? 在之前接触Linux,编辑网卡配置文件的时候我们用过了vi ,vim简单说就是vi的升级版,它跟vi一样是Linux系统中的一个文本编辑工具。 如果系统中没有vim ,需要安装一...

李超小牛子 ⋅ 今天 ⋅ 0

docker实战

构建企业级Docker虚拟化平台实战 重点剖析虚拟化和云计算概念; 分析Docker虚拟化的概念和原理; 从0开始实战Docker虚拟化平台; 基于Docker构建Nginx WEB服务器和CentOS虚拟机; 基于开源监...

寰宇01 ⋅ 今天 ⋅ 0

vim介绍、vim颜色显示和移动光标、vim一般模式下移动光标、一般模式下复制粘贴剪切

VIM Vim 是 UNIX 文本编辑器 Vi 的加强版本,加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较(vimdiff),语法高亮,全面的帮助系统,本地脚本(Vimscript),和便于选择的...

蛋黄Yolks ⋅ 今天 ⋅ 0

springboot+mockito测试controller层遇到的问题

使用MockitoJUnitRunner测试的一个例子,原来报错无法找到bean, 类似的异常如下:createBeanError..... 原因:是因为@Runwith使用了SpringRunner,应该修改为MockitoJUnitRunner 代码如下: ...

writeademo ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部