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']);//注册插件任务

posted on 2015-09-25 16:08 安蝶阅读( ...) 评论( ...) 编辑收藏

转载于:https://www.cnblogs.com/cyj7/p/4838556.html

grunt-contrib-compass 编译sass相关推荐

使用gulp编译 sass和less
Gulp是一个基于流的自动化构建工具,可以帮我实现很多的功能,比如代码编译.压缩等等. 网址:https://www.gulpjs.com.cn/ 个人对gulp的一个简单理解以下只是使用gulp编 ...
webstorm和intellij idea下如何自动编译sass和scss文件
前言学过css的人都知道,css他不是一个编程语言.虽然你可以用css去写网页样式,但是你却没法使用它进行编程.所以有一句话来描述css我个人觉得再合适不过了,"CSS基本上是设计师的工具 ...
sass webpack_如何在Visual Studio和Webpack中编译Sass文件
sass webpack Sass is a very popular CSS pre-processor. The intent of this tutorial is to show you ho ...
使用 Nginx 编译 Sass 和 Scss
前端的小伙伴对于 Sass 或 Scss(以下统称 Sass) 应该并不陌生,他是一种 CSS 预处理语言,使用 Sass 可以极大简化 CSS 代码的编写和维护. 通常情况下,我们在开发环境下使用 ...
Ubuntu22下OpenCV4.6.0+contrib模块编译安装
目录第一章 Ubuntu22下OpenCV4.6.0+contrib模块编译安装第二章 ubuntu22下C++ kdevelop环境搭建:OpenCV示例第三章 C++下OPENCV驱动调用海 ...
win10解决koala编译sass文件报错
## win10解决koala编译sass文件报错使用koala编译sass文件时报错invalid byte sequence in utf-8 use --trace for backtrace ...
Compass 编译.scss文件的问题
compass 命令编译scss文件存在一个问题: 不能对"_"下划线开头的scss文件名称的文件进行编译.将"_"去掉就可以啦转载于:https://www ...
28和lba48命令格式区别_编译Sass（命令行）
本文作者:开课吧无忧图文编辑:开三金 sass编译有很多种方式,如命令行编译模式.编辑器自动编译.编译软件koala.sass-loader等. 今天我们就先来看第一种:命令行编译刚才我在test ...
vs code使用Easy Sass插件编译sass文件路径报错问题解决
问题: scss文件中使用了@import来引入另一个scss文件,两个scss文件不在同一层级,所以我使用相对路径的写法来引用文件,但是使用vs code里面安装的扩展Easy Sass进行编译时, ...

grunt-contrib-compass 编译sass

grunt-contrib-compass 编译sass相关推荐

最新文章

热门文章