CentOS 7のLaravel5.5でBootstrap4をインストールする方法とトラブルシュート

こんにちは。
Laravel上で新規開発をするとき、私は簡単にいい感じのデザインが作成できるBootstrapを使用しています。
Laravelの最新LTSは5.5ですが、5.5にデフォルトで入っているBootstrapのバージョンは3系です。

よりモダンなデザインを使用するため、バージョン4系を入れたいところです。
以下では私がインストールする際に行ったことと、ぶつかったトラブルへの対処法を紹介します。

環境情報

CentOS Linux release 7.6.1810 (Core)
PHP 7.3.3
Apache/2.4.6
composer 1.8.4
Laravel 5.5.45

Bootstrap4をインストール

package.json

resource/asset/js/bootstrap.js

resources/assets/sass/app.scss

resources/assets/sass/_variables.scss

npmをインストール(失敗)

ここまでやった時点でnode.jsとnpmを入れ忘れていることに気が付きました。
なので以下コマンドでインストールしました。
※この方法は失敗したものですのでマネしないでください

結果以下のバージョンがインストールされました。
node v6.16.0
npm v3.10.10

npm installしてみた

結果がこちら

再度npmをインストール(成功)

前項のエラーメッセージより、
“Make sure you have the latest version of node.js and npm installed”
とあるので、最新にすればOKぽそうです。

これでインストールされたのは、
node v8.15.1
npm v6.4.1

かなりバージョン違いますね。。

再度npm installしてみた

すると今度はこんなエラーが。

libpng-devというパッケージが入っていないことが原因のようです。
以下のコマンドで対応しました。

このあとnpm installは成功しました。

Bootstrap4に必要なpopper.jsもインストールします。

ソースに変更を反映させる

ここまでだと、
public/css/app.css
の中身はBootstrap3系のままなので、npmの変更を反映させます。
以下のコマンドです。

たくさんエラーが出ました。

エラーメッセージを読んでみると、
途中でnodeとnpmのバージョンを変えたのが悪かったみたいで、
古いバージョンでビルドしたものを使おうとしてエラーが発生しているようです。

すると、成功しました。
app.cssもBootstrap4系になっています。

ページをスーパーリロードして、画面を確認したら終了です。

この記事が気に入ったら
いいね ! しよう

Twitter で
The following two tabs change content below.
ippei
AWSテクニカルリード
元ポーカープレイヤーで現エンジニア6年目。ギークフィードでは独立遊軍のチームである社長室に属しています。2022 AWS Partner Ambassador, 2021, 2022 APN AWS Top Engineer。AWS SAA, SAP, DOP, AXS。好きなAWSサービスはAmazon ConnectとAWS Amplify。TerraformとReactを勉強中。YouTube活動してます。

【採用情報】一緒に働く仲間を募集しています

採用情報
ページトップへ