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的更多相关文章

  1. 使用compass编译sass

    1.初始化项目 compass create test(项目名称),会在当前目录下创建test子目录,test的子目录下有config.gb文件,sass和stylesheets文件夹. 2.编写sa ...

  2. 前端开发环境之GRUNT自动WATCH压缩JS文件与编译SASS文件环境下Ruby安装sass常见错误分析

    前言: 1.sass编译为css文件,早先时刻写css,后来看了sass挺不错的,于是在新的项目中开始使用上了sass.(grunt需要ruby环境,所以需要先安装ruby,sass环境) ①安装ru ...

  3. grunt serve Warning: Running "sass:server" (sass) task

    使用grunt serve运行时遇到一问题: y@y:ydkt$ grunt serve Running "serve" task Running "clean:serv ...

  4. 编译SASS

    编译SASS sass编译有很多种方式,如命令行编译模式.sublime插件SASS-Build.编译软件koala.前端自动化软件codekit.Grunt打造前端自动化工作流grunt-sass. ...

  5. nodejs编译sass模块包 node-compass,与gulp包gulp-sass使用方法

    简介:node express或者就是node项目中,要自动编译sass方法很多,比如gulp 比如考拉,比如今天我想说的这个包node-compass. 编译sass的三种方法: 前提条件: 都需要 ...

  6. sass的入门(安装以及sublime中如何编译sass)

    很久之前就听到了sass和less,但是因为人懒(默默吐槽下自己),就没有去了解相关的知识.但是身为一个前端人员不了解sass好像有点low low 的,所以现在开始接触使用sass了. 万事开头难, ...

  7. Sublime Text通过插件编译Sass为CSS及中文编译异常解决

    虽然PostCSS才是未来,但是Sass成熟稳定,拥有一大波忠实的使用者,及开源项目,且最近Bootstrap 4 alpha也从Less转到Sass了.所以了解Sass还是非常有必要的. 基于快速开 ...

  8. Gulp如何编译sass

    Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 1.搭建web服务器 2.文件保存时自动重载浏览器 3.使用预处理器如Sass.LESS 4.优化资源,比如压缩CSS.JavaScr ...

  9. webpack+vue-loader 在单独.vue组件中使用sass-loader编译sass报错问题not a valid Win32 applictation

        如果webpack配置没有问题,在vue文件中编译sass/scss报上面的错误,大概是由于node-sass安装失败,重新卸载安装,   在国内安装node-sass失败的话,可以使用淘宝镜 ...

随机推荐

  1. 【AMAD】tenacity -- Python中一个专门用来retry的库

    动机 简介 用法 基本用法 何时停止 尝试间的等待 何时retry 其它 热度分析 源码分析 个人评分 动机 很多时候,我们都喜欢为代码加入retry功能.比如oauth验证,有时候网络不太灵,我们希 ...

  2. WINDOWS mysql 5.7.15 安装配置方法图文教程

    因本人需要需要安装Mysql,现将安装过程记录如下,在自己记录的同时,希望对有疑问的人有所帮助. 一.下载软件 1. 进入mysql官网,登陆自己的oracle账号(没有账号的自己注册一个),下载My ...

  3. npm install 报 128 错误

    [问题描述] 项目执行npm install的时候特别慢,到最后直接返回错误: verbose exit [ 1, true ] [解决方法] 执行以下两条命令: git config --globa ...

  4. 医院医疗类报表免费用,提反馈,还能赢取P30!

    医院医疗类报表免费用,提反馈,还能赢取P30! “葡萄城报表模板库是一款免费的报表制作.学习和参考工具,包含了超过 200 张高质量报表模板,涵盖了 16 大行业和 50 多种报表类型,为 30 余万 ...

  5. ZooKeeper的ACL权限

    ACL控制权限 什么是ACL(Access Control List访问控制列表) 针对节点可以设置相关读写等权限, 目的为了保障数据安全性 权限permission可以指定不同的权限范围以及角色 A ...

  6. 云数据库 MongoDB版

    阿里云云数据库MongoDB版是一种安全可靠.可弹性伸缩的云数据库服务,目前支持ReplicaSet和Sharding两种部署架构,通过简单的几步操作即可快速部署.阿里云云数据库MongoDB版是一种 ...

  7. [BZOJ 2002] [HNOI2010]弹飞绵羊(Link Cut Tree)

    [BZOJ 2002] [HNOI2010]弹飞绵羊(Link Cut Tree) 题面 某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆,他邀请小绵羊一起玩个游戏.游戏一 ...

  8. ListVie的用法

    1.在布局中放入一个listView <ListView android:id="@+id/list_view" android:layout_width="mat ...

  9. L2Dwidget.js L2D网页动画人物添加

    hexo 添加live2d看板动画 https://www.jianshu.com/p/3a6342e16e57 首先贴出官网代码 官网地址配置:https://www.npmjs.com/packa ...

  10. 关于redis的几件小事(十)redis cluster模式

    redis cluster是redis提供的集群模式. 1.redis cluster的架构 ①可以有多个master node,每个master node 都可以挂载多个slave node. ②读 ...