とある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
コメントする