GulpのCompassでBootstrapを使う

GulpのCompassでBootstrapを使う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

すると、scsscssの中にファイルが出来ました。この時点で

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

参考

Pocket
LINEで送る

You may also like...