未分類

LaravelでのBootstrap5の導入

Bootstrap5のインストール

$ npm -v
でバージョンが表示され、npmがインストールされていることを確認しましょう。

Laravelをインストールしたディレクトリ($ lsしてpackage.jsonなどが表示されるディレクトリ)にて

$ npm install
$ npm install bootstrap

を実行します。
正式版がリリースされたため、上記コマンドでもbootstrap5がインストールされるようになっていました。

これで公式にあるような

└── node_modules/
    └── bootstrap
        ├── js
        └── scss

という構造ができあがります。

Laravel Mixの設定

Laravel Mixはデフォルトでpackage.jsonに記載されているため、先程のnpm installにてすでにインストールはされているはずです。
設定は同じくLaravelのディレクトリにデフォルトで存在するwebpack.mix.jsにて行います。

デフォルトでは

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

という記述になっているかと思いますが、postCssはいらないので削除し、

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/scss/custom.scss', 'public/css');

と書き換えます。
resourcesディレクトリ配下にscssというディレクトリを作成します。
上記ではcustom.scssというファイル名を指定しているのでcustom.scssというファイルをresources/scss配下に作成しましょう。
もちろん設定と一致していれば任意の名前でOKなのでapp.scssなどでも大丈夫です。

custom.scssには下記を記述し、bootstrapを読み込みます。これはすべて読み込みますが、オプションで必要なものだけ読み込む方法もあります。(詳しくは公式

@import "../../node_modules/bootstrap/scss/bootstrap";

Laravelの場合はresourcesディレクトリの分階層が1つ深いので、Bootstrap公式より1階層多く上がっています。

$ npm run dev でコンパイルがされます。

ちなみに私の環境ではエラーがでたので
$ npm cache clear --force
$ npm install
でインストールし直してからnpm run devを再実行しました。

成功するとpublic/cssディレクトリ配下にながーいcustome.cssが出力されているはずです。

あとはSCSSを記述していくだけです!

参考:
公式 https://getbootstrap.jp/docs/5.0/customize/sass/
https://coliss.com/articles/build-websites/operation/work/bootstrap-5-tutorial-without-jquery.html

-未分類
-,

Copyright© F27P , 2021 All Rights Reserved Powered by AFFINGER5.