CDN版からSass版へ切り替える方法！初心者にもわかる移行手順と注意点まとめ
生徒
「これまでCDNでBootstrapを使ってきたんですが、最近Sass版に切り替えると自由にカスタマイズできると聞きました。どうやって切り替えるんですか？」
先生
「とても良い気づきですね。CDN版はすぐに使えて便利ですが、Sass版にすると色やサイズなどを自分の好みに合わせて変更できるようになりますよ。」
生徒
「でも、CDNからSass版にどうやって変えるのかが難しそうで…。」
先生
「安心してください。今回は、初心者でもわかるように移行の手順と違いを丁寧に説明しますね！」
1. CDN版とSass版の違いを理解しよう
CDN（シーディーエヌ）版のBootstrapは、すぐに使える完成品のCSSが読み込まれます。自動販売機で買ったジュースのように、すでに中身が決まっています。
一方で、Sass版のBootstrapは、CSSを自分で作り上げることができる「材料セット」です。自分の好きな味にカスタマイズできるので、開発の自由度が高くなります。
2. Sass版を使うとできること
・色やフォントサイズを自分好みに変更できる
・使わない機能を削ってファイルを軽くできる
・オリジナルのデザインと組み合わせて使いやすい
Bootstrapを本格的に使いたい人にとっては、Sass版への切り替えがとても有利です。
3. CDN版の読み込み方法（今までの使い方）
CDN版はHTMLに以下のようなタグを入れるだけで使えました。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
4. Sass版へ切り替える準備をしよう
まずはSass版を使うために、BootstrapのSassファイルをダウンロードします。公式サイトまたはnpmを使って入手可能です。
ここではnpmを使う方法を紹介します。
npm install bootstrap
インストールが完了すると、node_modules/bootstrap/scss/にSassのソースファイルが入ります。
5. Sass版での読み込み方法
Bootstrap全体を読み込むには、Sassファイルの中で次のように書きます。
@import "node_modules/bootstrap/scss/bootstrap";
読み込んだSassをビルドして、CSSファイルとして出力し、HTMLでリンクします。
<link href="css/style.css" rel="stylesheet">
6. HTMLの構成はそのままでOK
CDN版からSass版に移行しても、HTMLの構造はほとんど変更する必要がありません。
すでに書いているクラス名（例：btn btn-primaryなど）はそのまま使えます。
ただし、読み込むCSSファイルがCDNではなく、自分でビルドしたCSSに変わることが重要なポイントです。
7. Sass版移行で気をつけたいこと
- 1. Sassのビルドが必要
変換しないとブラウザで表示できません。 - 2. ファイル構成が増える
パーシャルや変数ファイルが増えるので管理が必要です。 - 3. 自分で調整する力が求められる
設定ミスがあると、デザインが崩れる場合があります。
8. Sass版への移行におすすめの流れ
- 今あるHTMLはそのまま残す
- CDN読み込みの
<link>を削除する - 代わりに自分で作ったCSSファイルを読み込む
- BootstrapのSassファイルを読み込んでビルド
- 問題がないかブラウザで確認
この手順を踏めば、CDN版からSass版への移行はスムーズに行えます。
9. 移行後にCSSをカスタマイズしてみよう
移行後のSassファイルに、好きな色やサイズを設定してみましょう。
<style>
$primary: #ff6600;
.btn-custom {
background-color: $primary;
color: #fff;
padding: 10px 20px;
}
</style>
<button class="btn-custom">カスタムボタン</button>
10. よくある質問とCDN版との違い
● Q. CDN版と同じ見た目になりますか？
A. 基本的には同じです。ただしSass版では自分で変数を変更すると見た目が変わります。
● Q. Sassってインストールしないと使えませんか？
A. はい。Sassはパソコンで変換作業をする必要があるので、ツールの準備が必要です。
● Q. 途中から切り替えると大変ですか？
A. 最初は少し手間がかかりますが、慣れるとカスタマイズしやすくなります。
