1

我通过 grunt 使用 Compass 来编译一个 SASS 文件。我的目录结构如下所示：

project/
    Gruntfile.js
    package.json
    sass/
        part1/
            part1.sass
    css/

还有我的 Gruntfile.js：

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    compass: {
        std: {
            options: {
                sassDir: 'sass',
                cssDir: 'css',
                specify: 'sass/part1/part1.sass',
                raw: 'disable_warnings = true\n'
            }
        }
    }
});

当我运行我的 gruntfile 时，Compass 输出到project/css/part1/part1.css，但我希望它输出到project/css/part1.css。我怎样才能做到这一点？现在我正在使用 on_stylesheet_saved 挂钩来移动文件，但它不是很优雅。

希望问题很清楚，并在此先感谢。

4

1 回答 1

1

我重新创建了你的环境。我可以进一步简化Gruntfile.js：

module.exports = function(grunt) {

    // Main project configuration
    grunt.initConfig({
        // Read NPM package information
        pkg: grunt.file.readJSON('package.json'),
        // Compass
        compass: {
            std: {
                options: {
                    cssDir: 'css',
                    sassDir: 'sass'
                }
            }
        }
    });

    // Load the grunt tasks
    grunt.loadNpmTasks('grunt-contrib-compass');

    // Compile production files
    grunt.registerTask('std', [
        'compass:std'
    ]);

    // Default task(s)
    grunt.registerTask('default', 'std');

};

你得到的是预期的指南针行为。

通过grunt-contrib-compass的自述文件阅读了一下，我看到：

Compass 在文件夹级别上运行。因此，您无需指定任何 src/dest，而是定义sassDirandcssDir选项。

这意味着您无法更改CSS编译到的路径，只能确定所有编译文件写入的根文件夹的路径。

虽然它可能很烦人，但compass只是假设保持编译与目录结构一致应该是您更愿意做的事情 - 这有点固执己见。

你仍然可以做你想做的事，通过：

  1. 重组您的文件，使它们位于compass期望它们符合您的意图的位置。即删除part1目录并放在文件夹part1.sass下。sass
  2. 将文件编译CSS到临时文件夹tmp中，使用另一个任务（如copy（grunt-contrib-copy）将所有CSS文件复制到css文件夹，然后使用任务clean（如grunt-contrib-clean）清空tmp文件）。您将按该顺序加载任务，以便它们以正确的顺序运行。
于 2014-04-01T21:14:26.557 回答