如何在ember-cli v0.0.28中添加西兰花指南针？

Question

我希望能够使用指南针在ember-cli项目中将我的SASS预处理到CSS中.

这样做broccoli-sass是微不足道的,正如bower install broccoli-sass所需要的一样,因为它已经内置了对它的支持.

broccoli-compass然而,这样做,结果相当棘手......怎么样？

---

细节:

对于ember-cli v0.0.23,之前已经提出了这个问题.并且它的答案似乎已经过时了 - 主要问题似乎是ember-cli抽取了很多内容Brocfile.js,并将其放入另一个文件中preprocessor.js,使用a Registry,因此解决方案会有所不同,符合标准Brocfile.js

---

更新:

@saygun已经回答了这个问题,解决方案允许人们使用broccoli-compass来编译SCSS - > CSS.但是有一些警告:

• 次要问题:minifyCssmeber-cli中现有的预处理器不起作用.您需要配置指南针以缩小其自己的CSS.
• 主要问题:如果SCSS文件引用图像,则生成的CSS文件包含指向图像的链接,其中路径位于Broccoli创建的临时树文件夹中.我不知道如何解决这个问题,并提出了一个跟进问题:如何使用指南针在ember-cli中生成图像精灵？

Answer 1

你需要安装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'
  });
};