いいですよねぇBootstrapって！少しの行数であんなにすごく綺麗なレイアウトが組めるんですから！
さらにVue.jsも素晴らしい！プログレッシブだから、開発規模に合わせて柔軟に対応できる！
そんなふたつが合わさったものが、記事を読んでいる人が使っているBootstrapVueです。
さて、そんなBootstrapVueなんですが、私、ここ最近になって新しいプロジェクトに入れることにしたんです、bootstrapVueを。
そしたらなんとね、上手く機能してくれないんですよ！！
具体的には、b-buttonのblockが効かなかったり、navbarの一部が不自然だったり、、、ぱっと見のレイアウトとか機能は問題なく動いてるんですけどね...😔
仕方なく検索しても、それっぽい記事がなかったので、今回は中々ないであろうこの問題について、紹介しますね。
環境
- dockerを使用(今回は階層とかは関係ないのでパス)
- macOS 11.5.1
- VueCLI 4.5.11
- Vue 2.6.14
- yarn 1.22.10
結論：解決方法
先に結論から言いますと、
一度削除して、bootstrap4.5.3とbootstrapVueを入れ直す！
ってな感じです。そのために、以下のコマンドを使います。
$ yarn remove bootstrap bootstrap-vue
$ yarn add bootstrap@4.5.3 bootstrap-vue
以上でうまい具合に動作すると思います。
原因
私が頭を抱えたこの問題の原因は、Bootstrapのバージョンにありました。
ここで、package.jsonをご覧ください。
"bootstrap": "^5.0.2",
"bootstrap-vue": "^2.21.2",
ここの、bootstrapのところを見ると、"5.0.2"と書かれていますね。つまり、bootstrap5.0.2を使用していることになっているんです。
なぜbootstrapのv5がダメなのか
※ここで、bootstrapの5.xをv5と、4.xをv4と略します。
なぜ最新であるはずのv5が、bootstrapVueになると急にダメダメちゃんになるのか。
それは、互換性のなさがあります。
まぁ、ここで「互換性」という言葉が正しいかは分かりませんが。
では、一体何と互換性がないというのか。
それが、v4なんです。
bootstrapVueはv4で動作する
BootstrapVue | Getting Startedには、動作する条件が書かれています。その中に、以下の内容が書かれています。
Bootstrap v4.3.1 is required, v4.5.3 is recommended
直訳すると、
Bootstrap v4.3.1は必要です。v4.5.3をお勧めしますがね。
って書かれています。つまり、お勧めのバージョンは4.5.3なんです。
v5とv4の大きな差異
多分この記事を見ているという人は、こういう経験をしたかと思います。
「あれ、b-buttonのblockが効かないぞ...？」
「なんでclassにml-2を書いてるのに、右側にmarginが出てこないんだ...」
そう、それがv4とv5との差異なんです！！
実はBootstrap5 | Migrating to v5を見てみると、確かにこう表示されているのです。
Breaking Renamed several utilities to use logical property names instead of directional names with the addition of RTL support:
Renamed .ml-* and .mr-* to .ms-* and .me-* .
Renamed .pl-* and .pr-* to .ps-* and .pe-* .
これを完璧に訳することはできませんが、ニュアンス的に、
「.ml-* とか.mr-* を、ms-* とかme-* に変更」
みたいなことが書かれてると思います。つまり、v4でのmlとかが使えないんですね...
最後に
まぁ、こういう事態に陥っている方はあまりいないとは思いますが、困ってる人のため、素人なりに即席ながら記録してみました。知識不足なところがあると思いますが、ご了承ください🙏