30

更新- 20140614:

この質問または github に対する回答が得られなかった後、私はこの問題に対する独自の解決策を考え出すことにしました。私はコンパスをさまざまなことに使用していましたが、その主な有用性は画像スプライトを生成する機能にありました。他のほとんどのことは、純粋な SCSS を使用して達成できます。

したがって、私はbroccoli-spriteを書きました。これは、 broccoli-sassを使用した SCSS の ember-cli の組み込みサポートと組み合わせて使用​​され、私のニーズを満たすことができました。

NPM

プロセスの詳細については、こちらをご覧ください。

したがって、コンパスを自分の ember-cli アプリに統合することに関心がなくなりました。私の解決策は質問に直接答えないため (コンパスを使用しないため)、この質問は未回答と見なします。この質問は、コミュニティ内でそうしたいと考えている他の人にまだ利益をもたらす可能性があるため、私はこれをオープンのままにしておきます。

更新- 20140620:

バウンティの有効期限が切れています。

元の質問:

broccoli-compassを使用するember-cliアプリで、生成された CSS が生成された画像ファイル パスを含め、画像ファイル パスを正しく参照するように構成するにはどうすればよいですか?

コンパスを使用して、次の SCSS:

@import"icon/*.png";
@include all-icon-sprites;

... は、フォルダー内のすべての画像と、それぞれを表示するための CSS を含む単一の.pngファイルを生成します。icon

ブロッコリー を使用してアセット パイプラインを構築するember-cli 内でコンパスを介して同じことができるようにしたいと考えています。

  • ember-cli 内で動作する必要があります - つまり、ember serve または ember build の実行時にビルドする必要があります
  • 画像のフォルダーから画像スプライトを生成するには、コンパスを使用する必要があります
  • 生成された画像は、アセット フォルダーにコピーする必要があります。
  • 生成された CSS は、一時的なツリー フォルダーではなく、assets フォルダーにある画像を指す必要があります。

私がこれまでに試みたこと：

#1

app.styles = function() {
  var tree = this.appAndDependencies();
  return compileCompass(tree, {
    outputStyle: 'expanded',
    relativeAssets: false,
    sassDir: this.name+'/styles',
    imagesDir: 'public/images',
    // imagesDir: this.name+'/styles/images',
    cssDir: '/assets',
  });
};

これを行うとcompass、ツリー内で画像ファイルを見つけることができないため、コマンドは失敗します。

#2

app.styles = function() {
  var tree = this.appAndDependencies();
  return compileCompass(tree, {
    outputStyle: 'expanded',
    relativeAssets: false,
    sassDir: this.name+'/styles',
    // imagesDir: 'public/images',
    imagesDir: this.name+'/styles/images',
    cssDir: '/assets',
  });
};

試しに、画像ファイルをスタイル ディレクトリにコピーします。今度は compass コマンドは成功しますが、生成された CSS は存在しない画像ファイルを参照します。生成された画像は、期待どおりにアセット フォルダーにコピーされないように見えます (または他の場所にコピーされます)。

$tree tmp/output
tmp/output/
├── assets
│   ├── app.css
│   ├── app.js
│   ├── qunit.css
│   ├── qunit.js
│   └── vendor.css
├── images
├── index.html
├── testem.js
└── tests
    └── index.html

3 directories, 8 files

詳細：

コンパイルできるようにしたい SCSS (スプライト生成用):

@import"compass/utilities/sprites";
$icon-layout: smart;
$icon-sprite-dimensions: true;
@import"icon/*.png";
@include all-icon-sprites;
@import"compass/css3/images";
4

2 に答える 2

3

これは、ember アドオンとポストプロセス フックを使用することで解決できると思い、アドオンを公開しました。

npm install ember-cli-compass --save-devrun:をプロジェクト内にインストールします。

で構成しますBrocfile.js。

/* global require, module */

var EmberApp = require('ember-cli/lib/broccoli/ember-app');

var app = new EmberApp({
    compass: {
        outputStyle: 'expanded',
        relativeAssets: false,
        sassDir: 'assets',
        imagesDir: 'images',
        cssDir: 'assets'
    }
});

module.exports = app.toTree();

これはあなたが望むことをしているようですが、私にはわかりません。また、フォルダーがにコピーされるため、public/images単にに変更する必要がありました。たぶんそれが問題で、アドオンは必要ありません。imagespublic/imagesdist/images

これで問題が解決することを願っています。

于 2014-07-20T11:40:26.657 に答える
1

難しい方法

あなたに追加brocfile

var app = new EmberApp({
    compassOptions: {
        imagesDir: 'public/assets'
    }
});

次に、アイコンをインポートします

@import "compass/utilities/sprites";
@import "icons/*.png";

$icons-sprite-dimensions: true;
@include all-icons-sprites;

パスを上書きします

.icons-sprite {
    background-image: url('/assets/icons-sea02d16a6c.png');
}

よりエレガントな方法

特定のディレクトリを使用するようにコンパスを構成する

@import "compass/utilities/sprites";
@import "compass/configuration";

$compass-options: (http_path: "/", generated-images-path: "public/assets", http-generated-images-path: "/assets", images-path: "public/assets");

@include compass-configuration($compass-options);

@import "icons/*.png";
$icons-sprite-dimensions: true;
@include all-icons-sprites;

機能しますが、完全な解決策ではありません。設定は.scssファイルに保存しないでください。残念ながら、内部のこれらのオプションは機能brocfileしません。

于 2015-03-19T11:05:40.880 に答える