まとめ
- Laravel 5.5 の package.json には、 "bootstrap-sass": "^3.3.7" とあり、 Bootstrap のバージョンが 3 である。これを 4 にした。
- bootstrap-sass のバージョン 4 はなく、 単純な Bootstrap 4 を指定することからか、 package.json 以外の次のファイルの修正が必要となった。
- resources/assets/js/bootstrap.js
- resources/assets/sass/_variables.scss
- resources/assets/sass/app.scss
修正内容
resources/assets/js/bootstrap.js
すべてのファイルを修正した後で、 npm run dev しましたところ、依存パッケージが不足しているというエラーとなってしまいました＞＜。
それで、 "popper.js" を追加しています。追加のためには、手でファイルを修正するのではなく、コマンドで追加を行いました。
npm install --save-dev bootstrap
npm install --save-dev popper.js
また、 npm install 後に、警告が出たため npm audit fix したところ、 "axios" のバージョンが上がっております。
diff --git a/package.json b/package.json
index 1780edd..67268a9 100644
--- a/package.json
+++ b/package.json
@@ -10,11 +10,12 @@
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
- "axios": "^0.17",
- "bootstrap-sass": "^3.3.7",
+ "axios": "^0.19.0",
+ "bootstrap": "^4.3.1",
"cross-env": "^5.1",
"jquery": "^3.1.1",
"laravel-mix": "^1.0",
- "lodash": "^4.17.4"
+ "lodash": "^4.17.4",
+ "popper.js": "^1.15.0"
}
}
resources/assets/sass/_variables.scss
参考ページに //$font-size-base: 14px; とコメントにするとあり、訳も分からずしたがっておりました。後ほど確認しましたら、コメントにしていたのは、そうしないと次のようなコンパイルエラーとなったからでした。
error in ./resources/assets/sass/app.scss
Module build failed:
$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
^
Incompatible units: 'rem' and 'px'.
in /var/www/node_modules/bootstrap/scss/_variables.scss (line 718, column 37)
@ ./resources/assets/sass/app.scss 4:14-266
@ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
実際に、コンパイルされた css, js を画面に表示して試したところ、 1rem を指定すればもともとの値と一致することがわかりました。
そこで、最終的に次の内容の修正となりました。
diff --git a/resources/assets/sass/_variables.scss b/resources/assets/sass/_variables.scss
index 7ae1d0b..781f589 100644
--- a/resources/assets/sass/_variables.scss
+++ b/resources/assets/sass/_variables.scss
@@ -19,7 +19,7 @@ $brand-danger: #bf5329;
// Typography
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
$font-family-sans-serif: "Raleway", sans-serif;
-$font-size-base: 14px;
+$font-size-base: 1rem;
$line-height-base: 1.6;
$text-color: #636b6f;
resources/assets/sass/app.scss
このファイルの修正はなんなのか当初全く分からなかったのですけれども、おそらく https://getbootstrap.com/docs/4.3/getting-started/webpack/#importing-precompiled-sass の設定を行なっていると思われます。
diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss
index 1bbc550..fa90d0c 100644
--- a/resources/assets/sass/app.scss
+++ b/resources/assets/sass/app.scss
@@ -6,4 +6,4 @@
@import "variables";
// Bootstrap
-@import "~bootstrap-sass/assets/stylesheets/bootstrap";
+@import "~bootstrap/scss/bootstrap";
試す
node install
node run dev
以上を実行し、エラーとならずにコンパイルが完了することを確認しました。
次に、実際にウェブページに使ってみました。
routes/web.php を修正して https://localhost/album で Bootstrap 4 のサンプルページを表示するようにしました。
サンプルページは、 resources/views/album.blade.php を追加してここに記述しました。この時、コンパイルした JavaScript 、 CSS を使うようにするためにこれらを読み込むタグを次のように入れ替えました。
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}"></script>
結果、表示されました。ただ、元の サンプルページ とは少し異なりました。おそらく、私は元の bootstrap-sass 3 のものをそのまま使っているため、 Bootstrap 4 の値とは差分があり、結果、表示が異なるのだと予想しています。
最後です。 resources/assets/sass/_variables.scss の値を変更すると、 CSS を変更しなくとも、コンパイル時に内容が CSS へ反映されます。
ちょっと大げさに、例えば $font-size-base: 2rem; と変更すると、ページのフォントサイズもおおよそ 2 倍となりました。成功です!
おわりに
Laravel 5.8 をみると、こちらは Bootstrap 4 を使用しており、本投稿で設定したのと似たような内容となっておりました。
ただし、違いとして、 package.json に sass 関連のものがありました。
これらの違いによって、これから不具合が起きるかもしれません。そうなりましたらその時に対処しようと思います。
また、次のページが参考になりました。ありがとうございます!
以上です。