Question

我希望获得基本的预处理工作流程。我已经设置了这样的目录结构：

- 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选项似乎没有任何影响。

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

感谢。

Answer 1

当您键入＆＃39;指南针＆＃39;时，您将直接运行指南针。你正试图用grunt来解决这个问题。您需要输入＆＃39; grunt watch＆＃39;。

使用Grunt时，让Compass将css编译到特定目录中

1 个答案: