はじめに
全部盛りビルドだと特に問題はないかもだけど、必要なものだけビルドするとなると問題が出てくるので、そこらへんを書く (コメントにて補足あり) 。
環境
Laravel 5.5.x
Bootstrap 4.0.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/bootstrap.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 はこの記事では羅列してるけど、そのうちぐちゃるので、ディレクトリやファイルなどで分割して上手く管理しよう。