デフォルトでは、ember-cli は css ファイルを 1 つにコンパイルしないように設定されているようです (JS ファイルの場合と同様)。
app/stylesすべてのファイル(およびサブディレクトリ) を 1 つのapp.cssファイル (および指紋など)にマージするように ember-cli を構成する最良の方法は何ですか? これは Brocfile を介して可能ですか、それともオーバーライドする必要がありますEmberApp.styles()か?
更新：私が見る限り、次の（あまりエレガントではない）オプションがあります：
1) SASS と@importCSS ファイルを app.scss に個別に使用します。@importこれの欠点は、追加のプラグイン (SASS) を使用する必要があることと、SASS が(例: )のグロブ パターンを許可していないように見えることです@import('**/*.scss')。これにより、このソリューションは大きなプロジェクトでは扱いにくくなります。
EmberApp.styles()2) CSS ファイルをコピーしないようにオーバーライドし (現在、これは のラッパーによって行われていますbroccoli-static-compiler)、css ファイルを に連結するように Broccoli を構成しますapp.css。ただし、このソリューションは少しハッキリしているようで、新しいバージョンの ember-cli と互換性がないというリスクがあります。
3) 回避策: broccoli-funnelandbroccoli-concatを使用して連結を自分で行います。
Brocfile.js では:
var appTree = app.toTree()
var concatenated = concat(appTree, {
inputFiles: [
'**/*.css'
],
outputFile: '/assets/app.css',
});
module.exports = mergeTrees([appTree, concatenated], { overwrite: true });
app.cssこれにより、連結されたすべての CSS を含む新しい が作成され/assets/app.cssます。ただし、このファイルはフィンガープリントされません。アセット ディレクトリは次のようになります。
/assets/app.css
/assets/app-<fingerprint>.css
したがって、明らかにハッキーな 2 番目のステップは、1) フィンガープリントのファイル名を取得しapp-<fingerprint>.css、2) 削除app-<fingerprint>.cssし、3) app.css の名前をapp-<fingerprint>.css. この最後のステップは、Grunt または gulp を使用して自動化できます。