无法使 grunt-contrib-compass 工作答案

【问题标题】：Can't make grunt-contrib-compass work无法使 grunt-contrib-compass 工作
【发布时间】：2013-07-09 09:31:09
【问题描述】：

所以我有以下情况。当我仅从 CLI 使用指南针时，它就可以正常工作并且完全符合要求。我正在从config.rb 文件所在的同一文件夹（在styles 文件夹中）运行compass compile。它还包含sass 和css 目录。这是我的config.rb 文件：

project_path = '.'
css_dir = "css"
sass_dir = "sass"
images_dir = "../../data/images"
javascripts_dir = "../scripts"

output_style = :compressed
environment = :development
relative_assets = true

当我尝试为此使用grunt 时，我在Gruntfile.js 中使用以下配置：

compass: {
    compile: {
        options: {
            basePath: 'app/src/styles',
            config: 'app/src/styles/config.rb'
        }
    }
}

app 文件夹和Gruntfile.js 位于同一级别。当我运行grunt compass 时，我看到以下输出：

Running "compass:dist" (compass) task
Nothing to compile. If you're trying to start a new project, you have left off the directory argument.
Run "compass -h" to get help.

Done, without errors.

如果我尝试直接指定所有选项，例如：

compass: {
    compile: {
        options: {
            basePath: 'app/src/styles',
            sassDir: 'app/src/styles/sass',
            cssDir: 'app/src/styles/css',
            imagesDir: 'app/data/images'
        }
    }
}

它完成了这项工作，但.sass-cache 文件夹是在Gruntfile.js 级别创建的。所以我猜配置的basePath选项有问题。

我做错了吗？

编辑：
唯一的方法是，我设法使其工作，按预期将config.rb 文件移动到Gruntfile.js 的级别，并在其中指定以下选项：

project_path = 'app/src/styles'
css_dir = "css"
sass_dir = "sass"
images_dir = "../../data/images"
javascripts_dir = "../scripts"

output_style = :compressed
environment = :development
relative_assets = true

我还从“Gruntfile.js”中删除了与此任务相关的所有选项。仍然不确定，这里发生了什么。

【问题讨论】：

blog.grayghostvisuals.com/css/image-url

标签： gruntjs compass-sass

【解决方案1】：

尽量不要在 Grunt 配置中设置 basePath，即：

compass: {
   compile: {
     options: {
        basePath: 'app/src/styles',
        config: 'app/src/styles/config.rb'
    }
  }
}

变成：

compass: {
       compile: {
         options: {
            config: 'app/src/styles/config.rb'
        }
      }
    }

还可以使用 --verbose 开关 (grunt compass --verbose) 运行您的 Grunt Compass，以查看 grunt 尝试处理的文件。

请注意，您添加到 Grunt 文件中的选项的任何设置都将覆盖（或扩展）您的 config.rb 文件中的设置。

查看此页面：https://github.com/gruntjs/grunt-contrib-compass 以查看有关 grunt-contrib-compass 的更多信息。他们有关于所有可能选项的信息。

【讨论】：

【解决方案2】：

如果您的项目需要与 config.rb 不同的基本路径，您可以在 config.rb 中设置路径（甚至是相对路径）

示例 config.rb

project_path    = "../src/main/webapp/"
http_path       = "./"
css_dir         = "css"
sass_dir        = "../library"
images_dir      = "assets/images"
fonts_dir       = "assets/fonts"
javascripts_dir = "assets/js"

...

relative_assets = true

SCSS 示例

.stylesheet-url {
  content:stylesheet-url("style.css");
}

.font-url {
  content:font-url("font.woff");
}

.image-url {
  content:image-url("image.png");
}

.generated-image-url {
  content:generated-image-url("image2.png");
}

示例 CSS

.stylesheet-url {
  content: url('style.css');
}

.font-url {
  content: url('../assets/fonts/font.woff');
}

.image-url {
  content: url('../assets/images/image.png');
}

.generated-image-url {
  content: url('../assets/images/image2.png');
}

我们在 Win7 x64 上运行 Compass 0.12.latest

【讨论】：