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失败的话,可以使用淘宝镜 ...
随机推荐
- 【AMAD】django-filer -- 一个管理文件和图片的django app
动机 简介 个人评分 动机 django-filer1可以让你像一些云存储一样使用WEB UI控制你的文件. 简介 下面是前端图片:   个人评分 类型 评分 实用性 ⭐️⭐️⭐️⭐️ 易用性 ⭐ ...
- 【AMAD】itsdangerous -- 用安全的方式把可信赖的数据传入不可信赖的环境,或者相反
动机 简介 内部原理 个人评分 动机 有时,你不得不把数据发送给一些不信赖的环境. 但是怎么安全地做这件事呢?答案就是使用签名. 简介 使用签名,首先设定一个只有你知道的key,你可以使用它来为你的数 ...
- python笔记之元祖
元祖创建使用圆括号括起来,中间元素使用逗号隔开 如:tuple1 = (1,2,3,4) tuple2 = () 空元祖 #!/usr/bin/env python #-*-coding:utf-8- ...
- 论文阅读 | Real-Time Adversarial Attacks
摘要 以前的对抗攻击关注于静态输入,这些方法对流输入的目标模型并不适用.攻击者只能通过观察过去样本点在剩余样本点中添加扰动. 这篇文章提出了针对于具有流输入的机器学习模型的实时对抗攻击. 1 介绍 在 ...
- 【数据库】Redis/MongoDB/MySQL/Oracle随笔索引
数据库体系 [思维导图]数据库体系 密码: a8ni Redis JPA
- PTA(Basic Level)1048.数字加密
本题要求实现一种数字加密方法.首先固定一个加密用正整数 A,对任一正整数 B,将其每 1 位数字与 A 的对应位置上的数字进行以下运算:对奇数位,对应位的数字相加后对 13 取余--这里用 J 代表 ...
- Largest Number At Least Twice of Others
In a given integer array nums, there is always exactly one largest element. Find whether the largest ...
- 2. zookeeper介绍及集群搭建
ZooKeeper 概述 Zookeeper 是一个分布式协调服务的开源框架. 主要用来解决分布式集群中 应用系统的一致性问题,例如怎样避免同时操作同一数据造成脏读的问题. ZooKeeper 本质上 ...
- Python使用pycharm导入pymysql
file->setting->project->project interperter,双击右侧出现的pip,弹出安装包,搜索pymysql->选择第一个->Instal ...
- [NAIPC2016]Jewel Thief(决策单调性+分治)
[NAIPC2016]Jewel Thief(决策单调性+分治) 题面 原题提交地址(题目编号H) 原题面下载地址 有\(n\)个物品,每个物品有一个体积\(w_i\)和价值\(v_i\),现在要求对 ...