pirosikick's diary

君のハートにunshift

sass-twitter-bootstrapのCSSスプライト画像のパスを変える

yeomanのyo webappで生成されるひな形にsass-twitter-bootstrap(bowerではsass-bootstrapという名前なので、app/components/sass-bootstrapにインストールされる)が含まれている。

で、app/styles/main.scssにも

@import 'sass-bootstrap/lib/bootstrap';

の1行がデフォルト含まれており、Twitter BootstrapのCSSが使用できるようになっている。

が、アイコンCSSスプライト画像のパスがapp/components/sass-bootstrap/lib/bootstrap.scssから相対パスになっており、そのままではアイコンが表示されない。

解決方法

イコン画像のパスはapp/components/sass-bootstrap/lib/_variables.scssでsassの変数として管理されている。

// app/components/sass-bootstrap/lib/_variables.scss Line:152

// Sprite icons path
// -------------------------
$iconSpritePath:          "../img/glyphicons-halflings.png" !default;
$iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png" !default;

!defaultで定義されているので、@importの前にこれらの変数を定義してあげれば上書きされる。

// app/styles/main.scssからの相対パスに書き換えてあげる
$iconSpritePath:          "../components/sass-bootstrap/img/glyphicons-halflings.png" !default;
$iconWhiteSpritePath:     "../components/sass-bootstrap/img/glyphicons-halflings-white.png" !default;

@import 'sass-bootstrap/lib/bootstrap';