Question

我正在使用Compass通过grunt编译一个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钩子移动文件，但它不是很优雅。

希望问题很清楚，并提前感谢。

Answer 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的自述文阅读一下，我看到了：

指南针在文件夹级别上运行。因此，您不指定任何src / dest，而是定义sassDir和cssDir选项。

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

虽然它可能很烦人，但compass只是假设保持编译对目录结构的真实性应该是你宁愿做的事情 - 这有点自以为是。

你仍然可以通过以下方式做你想做的事：

重新构建文件，使compass符合您的意图。{1}}即删除part1目录并将part1.sass放在sass文件夹下。
使用CSS（grunt-contrib-copy）之类的其他任务将tmp文件编译为copy等临时文件夹，将所有CSS个文件复制到{ {1}}文件夹，然后使用css（grunt-contrib-clean）之类的任务清空clean文件。您将按顺序加载任务，因此它们按正确的顺序运行。

源文件夹具有子文件夹时设置Compass目标文件夹

1 个答案: