Laravel5.5環境でBootstrap4を使ってみる
9787 ワード
概要
Laravel5.5をそのまま使うとBootstrap3のようなので、Boostrap4が使えないか調べてみた内容を残しておく。
Boostrap4インストール
package.jsonの内容を変更する。
package.json
...省略...
"devDependencies": {
"axios": "^0.17",
- "bootstrap-sass": "^3.3.7", <- 削除
+ "bootstrap": "^4.0.0", <- 追加
+ "popper.js": "^1.14.7", <- 追加
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^1.0",
...省略...
Bootstrapを切り替える (js)
Boostrap-sass
から今回インストールしたBoostrap4
へ切り替える。
resources/assets/js/bootstrap.js
...省略...
try {
window.$ = window.jQuery = require('jquery');
// require('bootstrap-sass'); // <- コメントアウト
require('bootstrap'); // <- 追加
} catch (e) {}
...省略...
Boostrapを切り替える(css)
読み込むスタイルをBoostrap4のものに差し替える。
resources/assets/sass/app.scss
...省略...
@import "variables";
// Bootstrap
// @import "~bootstrap-sass/assets/stylesheets/bootstrap"; // <- コメントアウト
@import "~bootstrap/scss/bootstrap"; // <- 追加
resources/assets/sass/_variables.scss
// Typography
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
$font-family-sans-serif: "Raleway", sans-serif;
// $font-size-base: 14px; // <- コメントアウト
$font-size-base: 1rem; // <- 追加
$line-height-base: 1.6;
$text-color: #636b6f;
app.jsとapp.css生成
下記コマンドにてBoostrap4
と依存関係のあるpopper.js
をインストールし、下記ファイルを生成する。
ターミナル
$ yarn install && yarn production
生成されるファイル
- yarn.lock
- public/mix-manifest.json
- public/js/app.js
- public/css/app.css
テスト
viewファイルをBoostrap4のHTMLに修正する。
https://getbootstrap.com/docs/4.3/getting-started/introduction/#starter-template
resources/views/welcome.blade.php
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{{-- CSS --}}
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
{{-- JavaScript --}}
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
動作確認
ちょっとわかりにくいですが、とりあえず問題なさそうです。
参考サイト
Author And Source
この問題について(Laravel5.5環境でBootstrap4を使ってみる), 我々は、より多くの情報をここで見つけました https://qiita.com/reflet/items/8532291cc0203c746b88著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .