PHP
bootstrap
laravel

Laravel 5.5.x で Bootstrap 4.x をカスタムビルドする

はじめに

全部盛りビルドだと特に問題はないかもだけど、必要なものだけビルドするとなると問題が出てくるので、そこらへんを書く。

環境

Laravel 5.5.x
Bootstrap 4.x

手順

Laravel 5.5.x をインストール:

$ composer create-project --prefer-dist "laravel/laravel:5.5.*" demo && cd $_

あらかじめ用意されてるものを削除:

php artisan preset none

package.json の必要ないものを削除:

package.json
"devDependencies": {
-  "axios": "^0.17",
   "cross-env": "^5.1",
   "laravel-mix": "^1.0"
-  "lodash": "^4.17.4"
}

必要なものをインストール:

npm i
npm i -D exports-loader jquery popper.js bootstrap@4

webpack.mix.js の修正:

webpack.mix.js
mix.autoload({
  'exports-loader?Util!bootstrap/js/dist/util': ['Util']
})
  .js('resources/assets/js/app.js', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css');

resources/assets/js/bootstap.js の修正:

bootstrap.js
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');

// 必要なものだけ
require('bootstrap/js/dist/button');
require('bootstrap/js/dist/collapse');
require('bootstrap/js/dist/dropdown');

resources/assets/sass/app.scss の修正:

app.scss
// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables
$body-bg: #f5f8fa;
$font-family-sans-serif: "Raleway", sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;

// Bootstrap 必要なものだけ
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
//@import "~bootstrap/scss/images";
//@import "~bootstrap/scss/code";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/dropdown";
//@import "~bootstrap/scss/button-group";
//@import "~bootstrap/scss/input-group";
//@import "~bootstrap/scss/custom-forms";
@import "~bootstrap/scss/nav";
@import "~bootstrap/scss/navbar";
//@import "~bootstrap/scss/card";
//@import "~bootstrap/scss/breadcrumb";
@import "~bootstrap/scss/pagination";
@import "~bootstrap/scss/badge";
//@import "~bootstrap/scss/jumbotron";
@import "~bootstrap/scss/alert";
//@import "~bootstrap/scss/progress";
@import "~bootstrap/scss/media";
//@import "~bootstrap/scss/list-group";
@import "~bootstrap/scss/close";
//@import "~bootstrap/scss/modal";
//@import "~bootstrap/scss/tooltip";
//@import "~bootstrap/scss/popover";
//@import "~bootstrap/scss/carousel";
@import "~bootstrap/scss/utilities";
//@import "~bootstrap/scss/print";

resources/views/welcome.blade.php の修正:

welcome.blade.php
<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        <link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div class="container mt-5 text-center">
            <div class="dropdown">
                <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown link
                </a>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </div>
        </div>
        <script src="{{ mix('js/app.js') }}"></script>
    </body>
</html>

アセットをビルド:

npm run dev

サーバを立ち上げて確認:

php artisan serve

まとめ

5.6.x ははじめから Bootstrap 4 よりに書かれているけど、だいたいの手順としては上記と同じだと思う。app.scss はこの記事では羅列してるけど、そのうちぐちゃるので、ディレクトリやファイルなどで分割して上手く管理しよう。

関連リンク

アセットのコンパイル(Laravel Mix) 5.5 Laravel
Webpack · Bootstrap