CompassでBootstrapを利用しようとするとちょっと面倒なことが起きました。BowerでBootstrapを管理したいけれど、Compassとどう同居すればよいかわからない。。。（ご存知のかた教えてください）
ということで、自分なりの設定を記録しておこうと思います。
gulp-compassを振り返る
Gulpの設定を振り返ります。
compass = require 'gulp-compass'
gulp.task 'compass', ->
gulp.src "#{dir.src}/scss/**/*.scss"
.pipe compass({
config_file: 'config.rb'
css: "#{dir.src}/css/"
sass: "#{dir.src}/scss/"
})
require 'bootstrap-sass' sass_dir = '_source/scss' css_dir = "_source/css" images_dir = "_source/images" javascripts_dir = "_source/js" fonts_dir = "_source/fonts"
こうなっています。
Compassを準備してBootstrapに対応する
BowerでBootstrapを扱うのを諦め、compassに一元化することにしました。まず、必要なgemファイルを用意します。
gem system --update gem install compass gem install bootstrap-sass
次にコンパスの準備です。
$ compass init
すると、scssとcssの中にファイルが出来ました。この時点で
さらに、bootstrapに対応させます。config.rbの中にある、require 'bootstrap-sass'という設定が大事らしいです。
$ compass install bootstrap
directory _source/js/bootstrap/
directory fonts/bootstrap/
create _source/scss/styles.scss
create _source/scss/_bootstrap-variables.scss
create _source/js/bootstrap/affix.js
create _source/js/bootstrap/alert.js
create _source/js/bootstrap/button.js
create _source/js/bootstrap/carousel.js
create _source/js/bootstrap/collapse.js
create _source/js/bootstrap/dropdown.js
create _source/js/bootstrap/modal.js
create _source/js/bootstrap/popover.js
create _source/js/bootstrap/scrollspy.js
create _source/js/bootstrap/tab.js
create _source/js/bootstrap/tooltip.js
create _source/js/bootstrap/transition.js
create _source/js/bootstrap-sprockets.js
create _source/js/bootstrap.js
create _source/js/bootstrap.min.js
create _source/fonts/bootstrap/glyphicons-halflings-regular.eot
create _source/fonts/bootstrap/glyphicons-halflings-regular.svg
create _source/fonts/bootstrap/glyphicons-halflings-regular.ttf
create _source/fonts/bootstrap/glyphicons-halflings-regular.woff
create _source/fonts/bootstrap/glyphicons-halflings-regular.woff2
write _source/css/styles.css
To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
<head>
<link href="/_source/css/styles.css" rel="stylesheet" type="text/css" />
</head>
たくさん、ファイルが出来ました！style.scssというのができてこれがメインのようです。
// Import Bootstrap Compass integration @import "bootstrap-compass"; // Import custom Bootstrap variables @import "bootstrap-variables"; // Import Bootstrap for Sass @import "bootstrap";
そして、style.scssを変換したcssのstyle.cssを使ってくれということです。jsとかたくさん入ってくるんですね。わけがわからぬ。もう使って慣れるしかないな。
