Bootstrap 5をSassでカスタマイズ！初心者でもできるdart-sass + npm構成の基本手順
生徒
「Bootstrapをそのまま使うだけじゃなくて、自分好みに色やデザインを変えることはできますか？」
先生
「はい、できますよ。Bootstrap 5はSass（サス）という仕組みを使うと、変数を変更して自分のプロジェクトに合わせて簡単にカスタマイズできます。」
生徒
「Sassって難しそうですが、初心者でも大丈夫ですか？」
先生
「大丈夫です。npmとdart-sassを使えば、初心者でも少しずつ理解しながら設定できますよ。では、基本手順を見ていきましょう！」
1. SassとBootstrapカスタマイズの基礎知識
Sass（サス）とは、CSSをもっと便利に使うための拡張言語です。変数（色やサイズを一括管理する仕組み）を使えたり、部品を分けて管理できるのが特徴です。Bootstrap 5はこのSassをベースに作られているため、Sassを使うことで「ボタンの色」「余白のサイズ」「フォント」などを簡単にカスタマイズできます。
たとえるなら、料理のレシピを自分用に書き換えるようなものです。レシピの材料（変数）を変更すれば、同じ料理でも味付けや見た目を自由に変えられます。
2. npm環境の準備
まずはnpmというツールを準備します。npmはNode.jsに付属しているパッケージ管理ツールで、Bootstrapやdart-sassをインストールするのに使います。
パソコンにNode.jsを入れるとnpmも使えるようになります。公式サイトからインストーラーをダウンロードし、画面の指示に従って進めれば準備完了です。
初心者の方は「npmはソフトをまとめて管理するアプリ」と理解しておくと安心です。
3. プロジェクトにBootstrapとdart-sassを導入
プロジェクトのフォルダを作ったら、npmを使ってBootstrapとdart-sassを追加します。コマンドプロンプトやターミナルで以下のように入力します。
npm init -y
npm install bootstrap sass
これで、Bootstrap 5とdart-sassがプロジェクトに入りました。以降は自分のスタイルをSassファイルに書いていきます。
4. Sassファイルを作成してBootstrapを読み込む
次に、自分用のSassファイル（拡張子は.scss）を作り、Bootstrapを読み込みます。例えば、custom.scssというファイルを作成して以下のように記述します。
@import "node_modules/bootstrap/scss/bootstrap";
この状態でdart-sassを使えば、Bootstrap全体がCSSに変換されます。ここに変数を書き換えれば、自分専用のBootstrapが作れるわけです。
5. Sass変数を使って色を変更してみよう
Bootstrapにはあらかじめ色や余白などの変数が用意されています。たとえば「プライマリーカラー（基本の青色）」を変更したい場合は、Bootstrapを読み込む前に変数を上書きします。
$primary: #ff6600;
@import "node_modules/bootstrap/scss/bootstrap";
これでボタンやリンクの基本色がオレンジに変わります。難しいコードを書かなくても、変数を1行書くだけでデザインを自由に変更できます。
6. dart-sassでコンパイルする方法
作成したSassファイルは、そのままではブラウザで使えません。そこで「コンパイル」という作業をしてCSSに変換します。dart-sassはこの変換を行うツールです。
コマンドは以下のようになります。
npx sass custom.scss custom.css
これでcustom.cssが出力され、HTMLから読み込めるようになります。
7. HTMLに適用して確認する
最後に、生成されたcustom.cssをHTMLファイルで読み込みます。次のように書けばOKです。
<link href="custom.css" rel="stylesheet">
ブラウザで表示すると、ボタンの色やデザインが変わっていることを確認できます。これで「Bootstrap 5をSassでカスタマイズする基本手順」が完了です。
8. 初心者が気をつけるポイント
Sassとnpmの構成は最初は難しく感じるかもしれませんが、理解してしまえば便利な仕組みです。特に初心者の方は以下の点を意識してください。
- 変数の上書きは必ず
@importの前に書く - コンパイル後のCSSをHTMLで読み込む
- 作業のたびにブラウザで確認して小さな変更から進める
この流れを守れば、安心してBootstrap 5を自分好みにカスタマイズできます。
