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】django-filer -- 一个管理文件和图片的django app

    动机 简介 个人评分 动机 django-filer1可以让你像一些云存储一样使用WEB UI控制你的文件. 简介 下面是前端图片:   个人评分 类型 评分 实用性 ⭐️⭐️⭐️⭐️ 易用性 ⭐ ...

  2. 【AMAD】itsdangerous -- 用安全的方式把可信赖的数据传入不可信赖的环境,或者相反

    动机 简介 内部原理 个人评分 动机 有时,你不得不把数据发送给一些不信赖的环境. 但是怎么安全地做这件事呢?答案就是使用签名. 简介 使用签名,首先设定一个只有你知道的key,你可以使用它来为你的数 ...

  3. python笔记之元祖

    元祖创建使用圆括号括起来,中间元素使用逗号隔开 如:tuple1 = (1,2,3,4) tuple2 = () 空元祖 #!/usr/bin/env python #-*-coding:utf-8- ...

  4. 论文阅读 | Real-Time Adversarial Attacks

    摘要 以前的对抗攻击关注于静态输入,这些方法对流输入的目标模型并不适用.攻击者只能通过观察过去样本点在剩余样本点中添加扰动. 这篇文章提出了针对于具有流输入的机器学习模型的实时对抗攻击. 1 介绍 在 ...

  5. 【数据库】Redis/MongoDB/MySQL/Oracle随笔索引

    数据库体系 [思维导图]数据库体系 密码: a8ni Redis JPA

  6. PTA(Basic Level)1048.数字加密

    本题要求实现一种数字加密方法.首先固定一个加密用正整数 A,对任一正整数 B,将其每 1 位数字与 A 的对应位置上的数字进行以下运算:对奇数位,对应位的数字相加后对 13 取余--这里用 J 代表 ...

  7. Largest Number At Least Twice of Others

    In a given integer array nums, there is always exactly one largest element. Find whether the largest ...

  8. 2. zookeeper介绍及集群搭建

    ZooKeeper 概述 Zookeeper 是一个分布式协调服务的开源框架. 主要用来解决分布式集群中 应用系统的一致性问题,例如怎样避免同时操作同一数据造成脏读的问题. ZooKeeper 本质上 ...

  9. Python使用pycharm导入pymysql

    file->setting->project->project interperter,双击右侧出现的pip,弹出安装包,搜索pymysql->选择第一个->Instal ...

  10. [NAIPC2016]Jewel Thief(决策单调性+分治)

    [NAIPC2016]Jewel Thief(决策单调性+分治) 题面 原题提交地址(题目编号H) 原题面下载地址 有\(n\)个物品,每个物品有一个体积\(w_i\)和价值\(v_i\),现在要求对 ...