はじめに
Laravelアプリに自分で作成したCSSやJavaScriptを反映させる場合、それらのファイルを相対パスで指定することも可能ですが、asset関数を使用することでよりシンプルに記述することができます。
cssファイル、jsファイルの保存先
asset関数は、publicディレクトリ内のファイルのURLを生成するために使用されます。
そのため、各ファイルはプロジェクトルート直下のpublicディレクトリ内に保存します。
今回は以下のようなディレクトリ構造を持つものとします。
public
├ css
│ └ style.css
├ js
│ └ script.js
asset関数の書き方
引数にpublicディレクトリからの相対パスを指定します。
例えば、上記のstyle.cssを取得するには以下のように記述します。
asset('css/style.css');
記述する場所
HTMLファイルに記述する場合と同様に、ビューファイル内の、CSSであればheadタグ内、JavaScriptであればbodyタグの最後に記述するのが一般的です。
cssの場合
<head>
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>
jsの場合
<body>
<!-- ページのコンテンツ -->
<script src="{{ asset('js/script.js') }}"></script>
</body>