在Ember-CLI项目中编译Compass

Question

我是一名有用的助手，可以为您翻译文本。

我正在使用ember-cli v0.0.23，并尝试让broccoli-compass包在我的项目中工作，但遇到了一些问题。

首先，在我的Brocfile中，我已经替换了标准的Ember-CLI“蓝图”版本：

var styles = preprocessCss(appAndDependencies, prefix + '/styles', '/assets');

以下内容为：

var compileCompass = require('broccoli-compass');
var styles = compileCompass(appAndDependencies, 'app/styles/app.scss', {
    outputStyle: 'expanded',
    sassDir: 'app/styles',
    imagesDir: 'public/images/'
});    

然而，当我运行ember build时，我收到以下输出：

$ ember build
[broccoli-compass] Error:  Command failed: Errno::ENOENT on line ["155"] of /Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/lib/compass/compiler.rb: No such file or directory - /Users/gaker/Sites/project/tmp/tree_merger-tmp_dest_dir-GrWa8Zva.tmp/app/styles/app.scss
Run with --trace to see the full backtrace. The command-line arguments was: `compass compile app/styles/app.scss --relative-assets --sass-dir app/styles --output-style expanded --images-dir public/images/ --css-dir "../compass_compiler-tmp_dest_dir-eFsq51BG.tmp"`

如果我尝试在终端中运行错误输出中的compass命令，它确实会创建文件，但是它在我的项目根目录上方一个目录（请注意输出中的--css-dir）。

当调用compileCompass时，我已经尝试了许多选项组合，例如sassDir，imagesDir等，这是我得到的最接近的结果。

那么有什么想法可以让compass、broccoli-compass和ember-cli成功地协同工作吗？

提前致谢。

- gaker

Answer 1

你可以使用ember-cli-compass-compiler插件来编译ember-cli应用中的compass。

只需在你的ember-cli应用中执行以下操作：

npm install --save-dev ember-cli-compass-compiler

这就是你需要做的，从现在开始一切都像预期的一样工作。它会在 ember build 或 ember serve 命令时编译你的 appname.scss 文件成 appname.css。

- quaertym

---

（已测试在0.0.40版本）编译部分可以正常工作，但是我无法引用位于public/assets/images（或其他目录）中的图像。URL将为http://localhost:4200/tree_merger-tmp_dest_dir-HoagpjbQ.tmp/images/logo.png（或类似），但找不到该图像。 - amenthes

问题在于将其推送到Heroku： 版本：0.0.44 构建中/bin/sh: compass: 未找到 - Gustavo Siqueira

@Jordan 如果你安装了broccoli-sass，那么你就不需要它，请卸载。你还需要在你的styles文件夹中拥有一个app.scss文件。 - quaertym

@quaertym 我把它删掉了，然后我在那里放了一个app.scss文件，但它没有起作用，当我把它改为我的应用程序标题时，它就起作用了。这是预期的行为吗？ - Jordan

@Jordan 是的，抱歉之前误导了你。文件名应该是 appname.scss，正如答案中所提到的。 - quaertym

Answer 2

尝试这个（添加了前缀和cssDir）：

var compileCompass = require('broccoli-compass');
var styles = compileCompass(appAndDependencies, prefix + '/styles/app.scss', {
    outputStyle: 'expanded',
    sassDir: prefix + '/styles',
    imagesDir: 'public/images/',
    cssDir: '/assets'
});

Steffen

- Steffen Brem

---

@ steffen：从ember-cli v0.0.28开始-这放在哪里？在Brocfile.js的某个地方吗？我不确定在项目中放置这些文件的位置，并怀疑自v0.0.23以来可能已经发生了变化。 - bguiz