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';