如何将 broccoli-compass 添加到 ember-cli v0.0.28？

Question

我希望能够在 ember-cli 项目中使用 compass 将我的 SASS 预处理为 CSS。

使用broccoli-sass 执行此操作很简单，因为只需要bower install broccoli-sass，因为已经内置了对它的支持。

但是，使用broccoli-compass 执行此操作非常棘手……如何？

---

详情：

这个问题之前有人问过，for ember-cli v0.0.23； 它的答案似乎已经过时了- 主要问题似乎是 ember-cli 抽象了Brocfile.js 中的许多内容，并使用Registry 将其放入另一个文件preprocessor.js，因此解决方案与标准外观不同Brocfile.js

---

更新：

@saygun 已经回答了这个问题，解决方案允许使用 broccoli-compass 编译 SCSS --> CSS。但是有几点需要注意：

• 小问题：meber-cli 中现有的minifyCss 预处理器将不起作用。您需要配置 compass 以缩小自己的 CSS。
• 主要问题：如果 SCSS 文件引用图像，则生成的 CSS 文件包含指向图像的链接，其中路径位于 Broccoli 创建的临时树文件夹中。我不知道如何解决这个问题，并提出了一个后续问题：How to generate image sprites in ember-cli using compass?

Answer 1

我最近发布了 ember-cli-compass-compiler，这是一个 ember-cli 插件，适用于较新的 ember-cli 应用 (>= 0.0.37)。

只需使用命令安装：

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

不需要其他配置，它将app/styles/appname.scss正确转换为appname.css。顾名思义，除了 sass 之外，它还允许您使用 Compass。

Answer 2

你需要安装broccoli-compass:

npm install broccoli-compass --save-dev

你需要安装 ruby​​ gem sass-css-importer:

gem install sass-css-importer --pre

然后在您的 brocfile 中执行以下操作：

var compileCompass = require('broccoli-compass');

app.styles = function() {
  var vendor = this._processedVendorTree();
  var styles = pickFiles(this.trees.styles, {
    srcDir: '/',
    destDir: '/app/styles'
  });

  var stylesAndVendor = mergeTrees([vendor, styles, 'public']);

  return compileCompass(stylesAndVendor, 'app' + '/styles/app.scss', {
    outputStyle: 'expanded',
    require: 'sass-css-importer',
    sassDir: 'app' + '/styles',
    imagesDir: 'images',
    fontsDir: 'fonts',
    cssDir: '/assets'
  });
};