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とかたくさん入ってくるんですね。わけがわからぬ。もう使って慣れるしかないな。