bootstrapを使用する際、別のCSS Frameworkを活用しているなどの理由で、干渉しないよう、一部分の要素のみ有効にしたい場合などがある。
こうした場合の対処方法を説明する。
bootstrapを対象要素のみ有効にするまでの流れ
- bootstrapの最新版をダウンロード
- bootstrapの拡張子を変更
- コンパイルするルールを作成
- コンパイルし、対象要素のみ有効なcssを出力
bootstrapの最新版をダウンロード
次のサイトにて、bootstrapをダウンロード。
bootstrapの拡張子を変更する
ダウンロードしたファイルにて、bootstrap.cssを「bootstrap.scss」に変更する。
コンパイルするルールを作成
先ほど拡張子を変更した同一ディレクトリにて、「mybootstrap.scss」というファイルを作成し、次のソースを記述する。
.bootstrap {
@import "bootstra";
}ここでは、クラス名「bootstrap」の要素内のみbootstrapが有効である、というルールとした。
コンパイルし、対象要素のみ有効なcssを出力
新ルールのcssを作成する際、「node-sass」を使用して出力するため、あらかじめインストールしておく。
npm install -g node-sass次に、実際に先ほどのルールをもとにcssを出力する。
コマンドは先ほどインストールした「node-sass」を使用し、第一パラメータに作成したルール「mybootstrap.scss」を指定。第二パラメータには出力後のファイル名を指定する。
ここでは、「mybootstrap.css」とした。
node-sass mybootstrap.scss mybootstrap.cssこれにより、出力したファイル「mybootstrap.css」を「bootstrap.css」の代わりに使用することで、クラス名「bootstrap」と指定した要素内のみbootstrapが有効となった。
