知識を整理するための個人的な備忘録です。
#方法
##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
#参考