5

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

这样做broccoli-sass是微不足道的，因为bower install broccoli-sass已经内置了对它的支持。

然而，这样做broccoli-compass是相当棘手的......如何？

细节：

之前已针对 ember-cli v0.0.23提出过这个问题；它的答案似乎已经过时 - 主要问题似乎是 ember-cli 抽象了很多东西，并使用 aBrocfile.js将其放入另一个文件中，因此解决方案与标准外观不同preprocessor.jsRegistryBrocfile.js

更新：

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

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

2 回答 2

3

我最近发布了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 。

于 2014-07-31T04:48:59.240 回答
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'
  });
};
于 2014-06-05T10:18:16.323 回答