Laravelで好きなCSSフレームワークを使う

準備

• npmというパッケージマネージャでのインストールを行います。
• Laravel標準のBootstrapではなく、どうしてもMaterializeを使ってみたかったのでこれを導入します。
• Materialize以外でも、npmでインストールできればやり方は同じです。

Materialize

環境

• Laravel Framework 7.22.4
• Materialize 1.0.0

導入

1. Sassを使えるようにする

まずSassを使えるようにします。
シンプルでわかりやすかった記事のリンクを貼っておきます。
LaravelにSCSSの導入方法

2.Materializeを導入

公式サイトのGetting Startedにあるコマンドを入れてインストールします。

terminal

npm install materialize-css

3. Materializeを読み込むように設定

resources/sass/app.scss

// Bootstrap
@import '~bootstrap/scss/bootstrap';

↑この部分を

resources/sass/app.scss

// Materialize
@import '~materialize-src/sass/materialize.scss';

↑に変更します

ちなみにフルパスはnode_modules/materialize-src/sass/materialize.scssです。

4. 変更を適用

terminal

npm run dev

念の為、コンパイル先を確認します。

public/css/app.css

@import url(https://fonts.googleapis.com/css?family=Nunito);@charset "UTF-8";

.materialize-red {
  background-color: #e51c23 !important;
}

.materialize-red-text {
  color: #e51c23 !important;
}

.materialize-red.lighten-5 {
  background-color: #fdeaeb !important;
                 ~省略~

materialize-redなどそれっぽいものが書かれているのでコンパイルされているようです。

5.　完成

最後に、CSSを適用させたいビューテンプレートのheadタグ中に
<link href="{{ asset('/css/app.css') }}" rel="stylesheet">
を書いてあげれば完成です。

layouts/app.blade.phpに書いて全ページに適用させるのが良いと思います。

番外編：導入される仕組み

ここまでで導入はできました。
導入された仕組みを書いてみたので時間があれば読んでみてください。

まずプロジェクトフォルダ直下のwebpack.mix.jsを開きます。

webpack.mix.js

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

この.sass('~')の部分でwebpackがresources/sass/app.scssファイルをコンパイルしてpublic/css/app.cssに出力してくれているようです。

そのため、コンパイル元のresources/sass/app.scssを見てみます。

resources/sass/app.scss

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

ここでBootstrapを読み込んでいました。~の部分はnode_modules/が省略されてます。

つまりresources/sass/app.scssファイルで読み込むパッケージを指定してコンパイルしているという事でした。