bootstrap-sass の導入とカスタマイズの手順を確認する

Sass として扱う。

Contents

経緯

Middleman v4 でアセットパイプライン機能がコアから削除されたため、Sprockets を介さない方法を試しておきたい。
マイナーバージョンアップには楽に対応できるようにしたい。

環境としては bootstrap-sass v3.3.6, middleman v3.4.1 で確認も、特に限定されないはず。

Install

プロジェクトに npm でインストールする。
assets 以下が本体となっている。

% npm install bootstrap-sass --save
% ls node_modules/bootstrap-sass/
CHANGELOG.md            README.md               bower.json              sache.json
CONTRIBUTING.md         Rakefile                composer.json           tasks/
Gemfile                 assets/                 lib/                    templates/
LICENSE                 bootstrap-sass.gemspec  package.json            test/

何かしらうまい方法があるかも知れないが、以下、マニュアルで設置する。
Saas ファイルをダウンロードして設置する方法と変わらない。
インストールした assets をドキュメントルートにコピーしておく。

% cp node_modules/bootstrap-sass/assets source/

Configuration

プロジェクトは、以下のディレクトリ構成とする。
ディレクトリ以外は、後述のステップで利用するファイルのみ抜粋。

source
├── assets
│   ├── fonts
│   │   └── bootstrap
│   ├── images
│   ├── javascripts
│   │   ├── bootstrap
│   │   └── bootstrap.js
│   └── stylesheets
│       ├── _bootstrap.scss
│       └── bootstrap
│           ├── _variables.scss
│           └── mixins
├── images
├── index.html
├── javascripts
│   ├── _bootstrap.js
│   └── all.js
└── stylesheets
    ├── all.sass
    └── foundation
        ├── _bootstrap-variables.scss
        └── _bootstrap.scss

CSS

カスタマイズ用に _bootstrap.scss と _bootstrap-variables.scss を作成する。

% cp assets/stylesheets/_bootstrap.scss source/stylesheets/foundation/
% cp assets/stylesheets/bootstrap/_variables.scss source/stylesheets/foundation/_bootstrap-variables.scss

_bootstrap-variables.scss は、必要な値の書き換えでカスタマイズができる。
_bootstrap.scss は、コメントアウトで不要なモジュールの読込をコントロールできる。

HTML が読み込む all.sass から import する。
variables を先に読み込む。

source/stylesheets/all.sass

@import "foundation/_bootstrap-variables"
@import "foundation/_bootstrap"

_bootstrap.scss から、assets 以下を読み込むようパスを変更する。

source/stylesheets/foundation/_bootstrap.scss

    :
@import "../assets/stylesheets/bootstrap/variables";
@import "../assets/stylesheets/bootstrap/mixins";
    :

Font

前ステップで作成した _bootstrap-variables.scss 内で font ファイルへのパスを指定する。
$bootstrap-sass-asset-helper には false が入っているので、後ろに ../assets/fonts/bootstrap/ を入力する。

source/stylesheets/foundation/_bootstrap-variables.scss

// [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path.
// [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths.
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../assets/fonts/bootstrap/") !default;

JavaScript

全部入りは bootstrap.js で。

% cp node_modules/bootstrap-sass/assets/javascripts/bootstrap.js source/javascripts/bootstrap.js

CSS と同じく JavaScript を riquire する手段があれば、必要なモジュールのみを選択してコンパイルできる（略）。

動作確認

glyphicon や tooltip を用意して表示。

source/index.haml

%button.btn.btn-default.btn-lg{:type => "button", 'data-toggle' => 'tooltip', 'data-placement' => 'top', 'title' => 'Tooltip on top'}
  %span.glyphicon.glyphicon-star{"aria-hidden" => "true"}
  Bootstrap Button

source/javascripts/all.js

console.log('You are running jQuery version: ' + $.fn.jquery)
$(function () {
    $('[data-toggle="tooltip"]').tooltip()
})

まとめ

ちょっと手間がかかりそう。
Bootstrap v4 も控えているので、当面 gem install する方針で。