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. numpy.take()

    numpy.take numpy的.take (a,indices,axis = None,out = None,mode ='raise' ) 沿轴取数组中的元素. 这个函数与“花式”索引(使用数组 ...

  2. Caused by: com.rabbitmq.client.AuthenticationFailureException: ACCESS_REFUSED - Login was refused using authentication mechanism PLAIN. For details see the broker logfile.的几种原因

    环境:centos 7+ 1.查看用户是否存在 进入安装目录使用./sbin/rabbitmqctl list_users查看是否存在用户 比如:./usr/local/rabbitmq/rabbit ...

  3. 【C/C++】对于可重入、线程安全、异步信号安全几个概念的理解

    由于前段时间,程序偶尔异常挂起不工作,检查后发现时死锁了,原因就是:在信号处理函数里面调用了fprintf. printf等io函数是需要对输出缓冲区加锁,这类函数对本身是线程安全的,但是对信号处理函 ...

  4. 【VS开发】【DSP开发】地址对齐

    组成原理说明------地址对齐 1.引入 1.1如下面的代码,定义了三个变量,int,char,int,并输出他们的十六进制的内存地址. #include<stdio.h> int ma ...

  5. 课程计划安排 ver: 2016-12-14

    录的越多,后续肯定会涨价. <x86 从实模式到保护模式> 这本书涉及到除了汇编语言,还有一些计算机架构和操作系统方面相关的知识点. 不仅为学习高级编程语言打下了非常扎实的基础,学完C++ ...

  6. 不同浏览器之间的javascript和css兼容性问题

    po主手头维护的网站是上世纪的作品.当时约摸ie所占的市场份额相当大,以至于开发人员都没有考虑到浏览器兼容性问题(这不科学!).怎奈po主是个强迫症阿.最近在修改的时候,还是没忍住,把兼容性问题解决了 ...

  7. 基于VS搭建OpenCV环境

    OpenCV OpenCV的全称是Open Source Computer Vision Library,是一个跨平台的计算机视觉库.OpenCV是由英特尔公司发起并参与开发,以BSD许可证授权发行, ...

  8. js日期相关方法

    /** * ===================================== * 日期相关方法 * ===================================== */ ;(fu ...

  9. Ansible 系统概述与部署

    Ansible 系统概述 Ansible是一款为类Unix系统开发的自由开源的配置和自动化工具.它用Python写成,类似于saltstack和Puppet但是有一个不同和优点是我们不需要在节点中安装 ...

  10. WPF最小化窗体后激活函数显示不了窗体

    WPF最小化窗体后激活函数显示不了窗体 今天测试小哥给我提了一些问题,其中一个问题是这样的,点击web端的一个链接,是能启动本地的一个应用程序的,如果本地应用程序已启动(通过tcp进程间通信),那么应 ...