LaraveでCSSをresourcesディレクトリ内に配置する

はじめに

今まで'public/css' ディレクトリ内に配置していたが、'resources/css' ディレクトリ内に配置する方法をまとめる

開発環境

Laravel 8
Node.js

'public' と 'resources' ディレクトリの違いについて

ディレクトリ名	説明
public	外部から直接アクセス可能なファイルを格納するための場所
resources	アプリケーションのリソースやソースコードを格納するための場所 Laravel Mixなどのビルドツールを使用して最終的な成果物が 'public' ディレクトリに配置される

Laravel Mixの設定

'webpack.mix.js' ファイルを編集し、どのCSSファイルをコンパイルし、どのJavaScriptファイルをバンドルするかを指定する

webpack.mix.js

mix.js('resources/js/app.js','public/js')
   // ...他のJavaScriptファイルを記述
   .postCss('resources/css/app.css','public/css')
   // ...他のCSSファイルを記述

コンパイルとバンドル

Laravel Mixを使ってCSSとJavaScriptをコンパイルおよびバンドルする

bash

npm run dev

もしくは、開発時にファイルの変更を監視して自動的にコンパイルするには、以下のコマンドを実行

bash

npm run watch

ブラウザでデザインを確認

生成されたCSSファイルは、'public/css'ディレクトリに配置されるので、'asset()'ヘルパー関数でCSSファイルを読み込む

blade.php

<link rel="stylesheet" href="{{ asset('css/app.css') }}">

これにより、CSSファイルがブラウザに提供され、デザインの確認が行えるようになる

さいごに

なお、'Javascript' も 'resources' ディレクトリ内に配置することができる
今後は基本的に'resources'ディレクトリに配置することに慣れていこうと思う