カテゴリー
コンピューター

Vue.js 3 に組み込んだ Bootstrap 5 をカスタマイズできるようにする方法

カスタマイズ可能にした Vue.js 3 に組み込んだ Bootstrap 5

カスタマイズ導入方法まとめ

  • Vue.js 3 に Bootstrap 5 を組込む手順メモ – oki2a24 の続きであることが前提。
  • yarn add sass-loader@^10 sass で依存パッケージをインストールします。ここで @^10 とバージョンを指定しているのは、最新版をインストールするとビルド時にエラーが発生したため。公式ドキュメントにも注釈がある。→ Working with CSS | Vue CLI
  • src/scss/custom.scss を作成し、 @import "node_modules/bootstrap/scss/bootstrap"; を記述する。カスタマイズ内容は、この行よりも上に書くこと。
  • src/main.js に import "@/scss/custom.scss"; を記述し custom.scss を読み込む。今まで読み込んできた素の Bootstrap である import "bootstrap/dist/css/bootstrap.min.css"; 行は不要となるので削除する。

具体的なカスタマイズの実践

依存パッケージのインストール

まず、必要な依存パッケージをインストールします。試行錯誤していた時には、かなり後の方でインストールの必要性に気がつきましたが、すでに知っているのでここでの説明では最初に行います。

yarn add sass-loader@^10 sass

vue -V の結果、 @vue/cli 4.5.12 ですので、 Working with CSS | Vue CLI の注意にもある通り、 sass-loader はバージョンを指定してインストールしました。

なお、 sass-loader と sass は何が違うのだろうかと疑問に思い、試しに sass-loader のみをインストールしてみますと、次のエラーとなりました。 sass をインストールすることで解消されましたので、 sass は絶対に必要となります。

Failed to resolve loader: sass-loader
You may need to install it.

また、 sass-loader@^10 ではなく sass-loader というように最新版 (本投稿執筆時の最新版は 11 でした) をインストールしたときにどうなったかといいますと、、、

yarn add sass-loader sass

次のエラーとなりました。

$ yarn serve
yarn run v1.22.10
$ vue-cli-service serve
 INFO  Starting development server...
98% after emitting CopyPlugin

 ERROR  Failed to compile with 1 error                             6:42:16

 error  in ./src/scss/custom.scss

Syntax Error: TypeError: this.getOptions is not a function


 @ ./src/scss/custom.scss 4:14-226 15:3-20:5 16:22-234
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://10.75.232.5:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

カスタマイズ内容を記述するファイルを用意

src/scss/custom.scss を作成し、 @import "node_modules/bootstrap/scss/bootstrap"; を記述しました。最低限必要なのはこれだけです。

src/scss/custom.scss

@import "node_modules/bootstrap/scss/bootstrap";

カスタマイズ用ファイルと Bootstrap を読み込むよう記述

カスタマイズ用ファイルを用意し、実際にカスタマイズ内容を追加したとしても今までの内容だけでは実際に変更内容が適用されません。

カスタマイズ用ファイルを読み込むために、 src/main.js を編集します。 import "@/scss/custom.scss"; を記述します。そして、今まで読み込んできた素の Bootstrap である import "bootstrap/dist/css/bootstrap.min.css"; 行は不要となるので削除します。

この時の注意点として、 import "@/scss/custom.scss"; は import "bootstrap"; よりも後ろに配置します。そうしないと、ビルドエラーにはならないけれども、 Bootstrap へのカスタマイズが適用されませんでした。

git diff src/main.js
diff --git a/src/main.js b/src/main.js
index 6f994da..e0c03e5 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,6 +3,6 @@ import App from "./App.vue";
 import router from "./router";
 import store from "./store";
 import "bootstrap";
-import "bootstrap/dist/css/bootstrap.min.css";
+import "@/scss/custom.scss";

 createApp(App).use(store).use(router).mount("#app");

ファイルの src/main.js 全体は次のようになりました。

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "bootstrap";
import "@/scss/custom.scss";

createApp(App).use(store).use(router).mount("#app");

実際にカスタマイズ

以上でカスタマイズを始めるために必要な作業は全て完了しました!

src/scss/custom.scss を編集していきます。例として、背景を真っ暗にしてみました。

この時の注意点として、カスタマイズ内容は @import "node_modules/bootstrap/scss/bootstrap"; 行よりも上に書くこと、という点があります。そうしないと、ここでもビルドエラーにはならないけれども、 Bootstrap へのカスタマイズが適用されませんでした。

$body-bg: #000;

@import "node_modules/bootstrap/scss/bootstrap";

おわりに

参考ページをまとめます。

以上です。

コメントを残す