WEB/システム/IT技術ブログ

Laravel 6.xでlaravel/uiを利用してBootstrapなどフロントエンドパッケージを組み込む

update : 2021/05/09

とあるLaravel 6.xプロジェクトでBootstrapを使用しているのですが、普通にCDNで読み込んでます。
Laravelではフロントエンドのパッケージ「laravel/ui」が用意されているので、せっかくなので切り替えてみたいと思います。
Laravel 5.8では標準搭載されていたlaravel/uiとBootstrapですが、Laravel 6.xからは含まれていないので、自身でインストールする必要があります。

laravel/uiをインストール

まず、laravel/uiをインストールします。

> composer require laravel/ui
Using version ^3.2 for laravel/ui
./composer.json has been updated
Running composer update laravel/ui
Loading composer repositories with package information
Updating dependencies
Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - laravel/ui[v3.2.0, ..., 3.x-dev] require illuminate/console ^8.0 -> found illuminate/console[v8.0.0, ..., 8.x-dev] but these were not loaded, likely because it conflicts with another require.
    - Root composer.json requires laravel/ui ^3.2 -> satisfiable by laravel/ui[v3.2.0, 3.x-dev].


Installation failed, reverting ./composer.json and ./composer.lock to their original content.

エラーになってしまいました。

調べてみると、どうやらLaravel 6.xにlaravel/ui 3.xはインストールできないみたいです。
Laravel 6.xにはlaravel/ui 1.x
Laravel 7.xにはlaravel/ui 2.x
Laravel 8.xにはlaravel/ui 3.x
みたいです。
バージョン1.xを指定してインストールを実行します。

> composer require laravel/ui 1.*
(略)
Package manifest generated successfully.
3 packages you are using are looking for funding.
Use the `composer fund` command to find out more!

インストール成功しました!

Bootstrapをインストール

次にBootstrapをインストールします。
以下のコマンドを実行するとpackage.jsonが更新されます。

> php artisan ui bootstrap
Bootstrap scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.

package.jsonを元に、Bootstrapをインストールします。

> npm install

Laravel MIXを使ってビルドします。

> npm run dev

以下のファイルが出力され、Bootstrapが含まれている事が確認できると思います。

public/js/app.js
public/css/app.css

番外編:Font Awesomeをインストール

ついでに、他のパッケージも組み込んでみます。
Font Awesomeをインストールします。

> npm install @fortawesome/fontawesome-free --save-dev

webpack設定します。「resouces/sass/app.scss」に以下を追記します。

@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/brands';

最後にビルドしてインストール完了です。

> npm run dev

番外編:Vue.jsをアンインストール

Vue.jsがデフォルトで組み込まれていますが、不要な場合はソースが重くなるだけなので除外します。
まず、package.jsonから以下のvue関連のパッケージを削除し、

        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.12"

パッケージをアンインストールします。

> npm install

「resouces/js/app.js」を開き、以下の部分をコメントアウトします。

// window.Vue = require('vue');

// Vue.component('example-component', require('./components/ExampleComponent.vue').default);

/*
const app = new Vue({
    el: '#app',
});
*/

最後にビルドしてアンインストール完了です。

> npm run dev
B!

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

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

Monthly Archives