Javascript 如何将西兰花指南针添加到ember cli v0.0.28中？

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

使用bower install Brocoli sass执行此操作非常简单，因为对它的支持已经内置，所以所需的一切都是

bower install Brocoli sass

然而，用它来做这件事却变得相当棘手。。。怎么做

---

详情：

这个问题以前有人问过,； 而且它的答案似乎已经过时了- 主要问题似乎是，ember cli提取了

Brocfile.js

中的大量内容，并使用

注册表将其放入另一个文件
preprocessor.js
，因此解决方案与标准的解决方案不同


更新：

@saygun提出了这个问题，解决方案允许人们使用西兰花指南针编译SCSS-->CSS。但是，有几个注意事项：


小问题：meber cli中现有的
minifyCss
预处理器将无法工作。您需要配置compass以缩小它自己的CSS
主要问题：如果SCSS文件引用图像，则生成的CSS文件包含指向图像的链接，其中路径位于由Brocoli创建的临时树文件夹中。我不知道如何解决这个问题，并提出了一个后续问题：
您需要安装
西兰花指南针
：

npm install broccoli-compass --save-dev

您需要安装ruby gem
sass css导入器
：

gem install sass-css-importer --pre

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

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'
  });
};

我最近发布了一个新的ember cli应用程序（>=0.0.37）的ember cli插件

只需使用以下命令安装：

npm安装--保存dev-ember cli compass编译器

不需要其他配置，它可以正确地将
app/styles/appname.scss
转换为
appname.css
。正如名称所示，除了sass之外，它还允许您使用。
@JordyLangen在项目文件夹中，找到
node\u modules/ember cli/lib/preprocessors.js
，我找到了这个
注册表
系统。我试图添加一个新函数（
modules.exports.preprocessCompass=function…
），但得到了一些相当神秘的堆栈跟踪。。。不太远。我将在下面尝试@saygun的建议。@JordyLangen我将对此进行更详细的介绍，尽管在本文中，它并不是专门针对花椰菜指南针的，并且在主
Brocfile.js
中添加了配置任何花椰菜插件的功能，并使其与
preprocessors.js
+1中的内置插件很好地集成&检查-非常感谢您解决了所有这些问题。一些额外的调整是必要的，以使其工作，但太长的评论。。。。但总而言之，
app.scss
不起作用，请改用
*.scss
。还有，你是怎么知道的？我无法找到
app.style
和
\u processedVendorTree（）
@saygun的文档-当SCSS文件引用图像文件时，此解决方案似乎不起作用-输出CSS中的URL包含临时树文件。如果可以的话，请看一下我的后续问题：如果它对其他人有帮助：我最终不得不通过compass代码本身进行调试，以查看它是如何解析路径的。这看起来很麻烦，也很耗时，所以如果事情对你不起作用，那就去那里看看。对于最近的项目，这是最好的选择。这在ember cli 0.1.1项目中立即起作用。