grunt-contrib-compass 编译sass
grunt-contrib-compass的作用是编译sass文件为css。使用该插件需要先安装sass和compass。
(1)安装sass
gem install sass
(2)安装compass
gem install compass
(3)执行 compass create webfans(项目名称),如果不带项目名称,则是在当前目录下生成一个项目结构:
config.rb里面存储了基本的配置,css目录和sass目录
(4)安装grunt的grunt-contrib-compass插件
npm install grunt-contrib-compass --save-dev
(5)配置Gruntfile.js
grunt.initConfig({
compass:{
dist: {
options:{
config:'config.rb' //此文件路径相对于Gruntfile.js
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-compass');//加载指定插件任务
grunt.registerTask('default',['compass']);//注册插件任务
或 不使用config.rb文件
grunt.initConfig({
compass:{//compass任务
dist:{//一个子任务
options: {//任务设置
sassDir: 'sass',
cssDir: 'css',
environment: 'production'
}
},
dev: {//另一个任务
options:{
sassDir: 'sass',
cssDir: 'style'
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-compass');//加载指定插件任务
grunt.registerTask('default',['compass']);//注册插件任务
grunt-contrib-compass 编译sass的更多相关文章
- 使用compass编译sass
1.初始化项目 compass create test(项目名称),会在当前目录下创建test子目录,test的子目录下有config.gb文件,sass和stylesheets文件夹. 2.编写sa ...
- 前端开发环境之GRUNT自动WATCH压缩JS文件与编译SASS文件环境下Ruby安装sass常见错误分析
前言: 1.sass编译为css文件,早先时刻写css,后来看了sass挺不错的,于是在新的项目中开始使用上了sass.(grunt需要ruby环境,所以需要先安装ruby,sass环境) ①安装ru ...
- grunt serve Warning: Running "sass:server" (sass) task
使用grunt serve运行时遇到一问题: y@y:ydkt$ grunt serve Running "serve" task Running "clean:serv ...
- 编译SASS
编译SASS sass编译有很多种方式,如命令行编译模式.sublime插件SASS-Build.编译软件koala.前端自动化软件codekit.Grunt打造前端自动化工作流grunt-sass. ...
- nodejs编译sass模块包 node-compass,与gulp包gulp-sass使用方法
简介:node express或者就是node项目中,要自动编译sass方法很多,比如gulp 比如考拉,比如今天我想说的这个包node-compass. 编译sass的三种方法: 前提条件: 都需要 ...
- sass的入门(安装以及sublime中如何编译sass)
很久之前就听到了sass和less,但是因为人懒(默默吐槽下自己),就没有去了解相关的知识.但是身为一个前端人员不了解sass好像有点low low 的,所以现在开始接触使用sass了. 万事开头难, ...
- Sublime Text通过插件编译Sass为CSS及中文编译异常解决
虽然PostCSS才是未来,但是Sass成熟稳定,拥有一大波忠实的使用者,及开源项目,且最近Bootstrap 4 alpha也从Less转到Sass了.所以了解Sass还是非常有必要的. 基于快速开 ...
- Gulp如何编译sass
Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 1.搭建web服务器 2.文件保存时自动重载浏览器 3.使用预处理器如Sass.LESS 4.优化资源,比如压缩CSS.JavaScr ...
- webpack+vue-loader 在单独.vue组件中使用sass-loader编译sass报错问题not a valid Win32 applictation
如果webpack配置没有问题,在vue文件中编译sass/scss报上面的错误,大概是由于node-sass安装失败,重新卸载安装, 在国内安装node-sass失败的话,可以使用淘宝镜 ...
随机推荐
- Linux删除命令rm
在用Linux的时候,有时分要删除一个文件夹,常常会提示次此文件非空,没法删除,这个时分,必需运用rm -rf命令.关于一些小白用户常常在运用Linux命令,会十分当心,以免搞出一些事情,下面小编将教 ...
- Leetcode之广度优先搜索(BFS)专题-529. 扫雷游戏(Minesweeper)
Leetcode之广度优先搜索(BFS)专题-529. 扫雷游戏(Minesweeper) BFS入门详解:Leetcode之广度优先搜索(BFS)专题-429. N叉树的层序遍历(N-ary Tre ...
- 出现错误lambda expressions are not supported at language level 7解决方法
AS工程出现题目中的错误.解决办法: 这两个选中为1.8. 然后AS会自动在app的build.gradle下面,android{}里面增加 同时会修改app.iml文件中的如下部分,将Languag ...
- // TODO Auto-generated method stub 作用及设置
当我们创建一个主方法类时,eclipse会默认插入一条注释语句: // TODO Auto-generated method stub 作用: // TODO Auto-generated metho ...
- 移动端、pc端通用点击复制
点击复制 function copyArticle(event){ const range = document.createRange(); range.selectNode(document.ge ...
- QVector与QMap查找效率实战(QMap快N倍,因为QVector是数组,QMap是有序二叉树,查找的时候是N和LogN的速度对比)
因为项目使用QVector,太慢了,听说QMap比QVector查找时快,所以写一个小程序试试: 从30000个数据中找5000个 程序运行截图如下: QVector QMap 一样的数据,找一样的数 ...
- Codeforces 1201E2. Knightmare (hard)
传送门 看到棋盘先黑白染色冷静一下 然后分析发现,如果初始时两只马在同色的格子,那么一定是后手吃先手 反之一定是先手吃后手 所以分类讨论一下,如果初始在同色的格子,并且后手到达终点的步数更少,那么后手 ...
- Bicolored RBS CodeForces - 1167D (括号)
建树, 然后高度最大值的最小值显然为$\lceil \frac{dep}{2}\rceil$, 将$>\frac{dep}{2}$的全部分出去即可. #include <sstream&g ...
- 学习笔记--APIO 2018 二分专题 By wuvin
前言: 在APIO 2018 Day2下午听wuvin讲二分,听了一上午的神仙,现在终于有可以听懂了. 专题: 平均边权最大 题目链接:https://www.questoj.cn/problem/3 ...
- 两种表复制语句(SQL)
select into select语句和select into from语句 1.INSERT INTO SELECT语句 语句形式为:Insert into Table2(field1,field ...