0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Laravel】CSS/JavaScriptの読み込み

Posted at

知識を整理するための個人的な備忘録です。

#方法
##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

#参考

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?