4

環境について少し説明します。Gruntを使用してUIビルドの自動化を行い、サードパーティの依存関係を管理するためにTwitter Bowerを使用します。リポジトリにサードパーティのコードを保持したくないため、CSS拡張にCompassを使用します。

現在、ベンダーアセットの圧縮バージョンを単一のCSSファイルに作成していて、ビルド中にCompassが画像をインライン画像に変換しないという問題が発生しました。すべての画像をデータURLを使用して結果のCSSファイルにインライン化する必要があります（IE9 =より新しいブラウザーをサポートしている場合）。

BootstrapSASSを含むマスターSCSSファイルは次のようになります

// styles/main.scss
$iconSpritePath:      '../components/bootstrap-sass/img/glyphicons-halflings.png';
$iconWhiteSpritePath: '../components/bootstrap-sass/img/glyphicons-halflings-white.png';
//..
@import "../components/bootstrap-sass/lib/bootstrap";

コンパスコマンドは次のようになります

compass compile --css-dir target/compass/styles \
   --sass-dir app/styles --images-dir app/images --output-style expanded

結果の出力は次のようになります

// target/compass/styles/main.css
/* line 18, ../../../app/components/bootstrap-sass/lib/_sprites.scss */
[class^="icon-"],
[class*=" icon-"] {
  display: inline-block;
  ...
  /* WANT THIS IMAGE INLINED */
  background-image: url("../components/bootstrap-sass/img/glyphicons-halflings.png");
  ...
}

したがって、主な目的は、url()base64でエンコードされた画像をインラインで保持するためにすべての式を取得することです。別の方法として、この機能をより簡単に提供できる場合は、LESSに切り替えることができます。実際、Ruby / Compassへの依存を排除​​し、NPMですべてをインストールできるので、良いことです。

4

2 に答える 2

0

ブートストラップSASSメインファイルのベースパスの変数を変更しただけです。それは役に立ちました。

于 2013-05-31T20:18:43.503 に答える