CentOS 7のLaravel5.5でBootstrap4をインストールする方法とトラブルシュート | ソフトウェア開発のギークフィード

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系になっています。

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

アバター

ippei

元ポーカープレイヤー

Leave a reply

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ページトップへ