知識を整理するための個人的な備忘録です。
方法
CSS
public/cssフォルダ内にcssファイルを作成。
index.blade.phpファイルでindex.cssファイルを読み込む場合
index.blade.php
<link href="{{asset('css/index.css')}}" rel="stylesheet">
ヘルパーメソッドのassetは、作成したプロジェクトのpublicディレクトリまでのパスを返してくれる関数ですので、assetを使うことでpublicフォルダの中身を自動的に判別してくれるという仕組みになっています。
<link href="{{asset('(public/)css/index.css')}}" rel="stylesheet">
JavaScript
他にも方法はありますが、今回はnode.jsを使います。
まずは下記コマンドでインストール。
$ npm install
resources/js/内に任意のファイル名index.jsを作成し、webpack.mix.jsにコードを書き足します。
webpack.mix.js
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/index.js', 'public/js') //追記
.sass('resources/sass/app.scss', 'public/css');
index.blade.phpファイルでindex.jsファイルを読み込む場合
index.blade.php
<script src="{{ mix('js/index.js') }}"></script>
最後にターミナルでコマンドを実行。
$ npm run dev