5

コンパスを使用して、 ember-cliプロジェクトで SASS を CSS に前処理できるようにしたいと考えています。

これを行うことbroccoli-sassは簡単で、bower install broccoli-sass必要なことはすべて、それに対するサポートが既に組み込まれているためです。

しかし、これを行うbroccoli-compassのはかなりトリッキーであることが判明しました...どのように？

詳細：

この質問は、 ember-cli v0.0.23 について以前に尋ねられました。その答えは古くなっているようです - 主な問題は、ember-cli が の多くのものを抽象化し、それをを使用しBrocfile.jsて別のファイルに入れることです。したがって、解決策は標準的な外観とは異なります。preprocessor.jsRegistryBrocfile.js

アップデート：

この質問は @saygun によって回答されており、解決策により、broccoli-compass を使用して SCSS --> CSS をコンパイルできます。ただし、いくつかの注意事項があります。

  • 軽微な問題: minifyCssmeber-cli の既存のプリプロセッサは機能しません。独自の CSS を縮小するには、compass を構成する必要があります。
  • 重大な問題: SCSS ファイルが画像を参照する場合、生成された CSS ファイルには画像へのリンクが含まれており、パスは Broccoli によって作成された一時ツリー フォルダー内にあります。これを回避する方法がわからないので、フォローアップの質問をしました: How to generate image sprites in ember-cli using compass?
4

2 に答える 2

2

インストールする必要がありますbroccoli-compass：

npm install broccoli-compass --save-dev

ruby gem をインストールする必要がありますsass-css-importer:

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'
  });
};
于 2014-06-05T10:18:16.323 に答える