Question

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

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

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

详细说明：

之前已经问过这个问题，for ember-cli v0.0.23; 它的答案似乎已经过时了 - 主要问题似乎是ember-cli在Brocfile.js中提取了大量内容，并使用preprocessor.js将其放入另一个文件Registry中，因此解决方案将是与标准Brocfile.js

不同

更新

@saygun已经回答了这个问题，解决方案允许人们使用西兰花指南针编译SCSS - ＆gt; CSS。但是有一些警告：

次要问题：meber-cli中现有的minifyCss预处理器无效。您需要配置指南针以缩小其自己的CSS。
主要问题：如果SCSS文件引用图像，则生成的CSS文件包含指向图像的链接，其中路径位于Broccoli创建的临时树文件夹中。我不确定如何解决此问题，并提出了跟进问题：How to generate image sprites in ember-cli using compass?

Answer 1

我最近发布了ember-cli-compass-compiler，这是一个用于较新的ember-cli应用程序的ember-cli插件（＆gt; = 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'
  });
};

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

2 个答案: