使用 Grunt 时获取 Compass 将 css 编译到特定目录答案

【问题标题】：Get Compass to compile css into specific directory when using Grunt使用 Grunt 时获取 Compass 将 css 编译到特定目录
【发布时间】：2014-09-16 10:39:52
【问题描述】：

我想建立一个基本的预处理工作流程。我已经建立了一个这样的目录结构：

- website-root
- - index.html
- - css
- - pre-processing
- - - Gruntfile.js
- - - package.json
- - - sass
- - - - test.scss

我正在使用 Grunt，因为我想要一些高级构建操作。我也在使用 Compass，因为我想使用它的 mixins 等。

我现在要做的只是设置一个监视任务，将“test.scss”编译成网站根目录下的 css 文件夹中的“test.css”文件。但是，无论我尝试什么，当我在控制台中键入“compass watch”然后更改“test.scss”文件的内容时，结果是“test.css”文件总是被编译到一个新文件夹中在“预处理”文件夹中称为“样式表”。

Gruntfile.js 的内容是：

module.exports = function (grunt) {
    'use strict';
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),


        compass: {
            dev: {
                options: {
                    sassDir: 'scss/',
                    cssDir: '/css/',
                    relativeAssets: true
                }
            }
        },
        watch: {
            sass: {
                files: ['scss/{,*/}*.{scss,sass}'],
                tasks: ['compass:dev']
            }
        }

    });
    grunt.loadNpmTasks('grunt-contrib-compass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default', ['compass:dev']);
}

package.json 文件包含以下内容：

{
  "name": "Test",
  "version": "0.0.1",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-compass": "^1.0.1"
  }
}

所以 Gruntfile.js 中的 cssDir 选项似乎没有影响。

谁能说明为什么会这样？我是一个完全预处理的新手，所以可能会遗漏一些明显的东西！

谢谢。

【问题讨论】：

标签： sass gruntjs compass-sass compass

【解决方案1】：

当您输入“compass watch”时，您将直接运行 compass。您正在尝试使用 grunt 来完成这项工作。您需要输入“grunt watch”。

【讨论】：