Laravel 5 で HtmlBuilder と URL::asset() を使用して、サイト内外に CSS ファイルと JS ファイルを導入する

サイト内またはサイト外の css および js ファイルをアプリケーションに導入することは、基本的な要件です。Laravel 5 では、css および js を導入するためのさまざまな方法が提供されています。

1. HtmlBuilder

Laravel 5 より前は、組み込みの HtmlBuilder を使用してスタイルとスクリプト ファイルを追加していましたが、Laravel 5 では HtmlBuilder がコアから削除されたため、HTML::style() は無効になりました。 Laravel 5でも引き続き使用したい場合は、illuminate/htmlパッケージを手動で導入する必要があります。

引き続き Composer を通じてインストールします:

composer require illuminate/html 5.*

インストールが完了したら、config/app.php 内のサービスプロバイダーをプロバイダー配列に登録する必要があります:

Illuminate\Html\HtmlServiceProvider::class,

同時に、ファサードをエイリアスに登録します配列:

'Html' => Illuminate\Html\HtmlFacade::class,'Form' => Illuminate\Html\FormFacade::class,

次にできること ビュー ファイルは、次の方法を使用して CSS ファイルと js ファイルを導入します:

{!!Html::style('css/style.css')!!}{!!Html::script('js/script.js')!!}

注: デフォルトでは、サイト上のファイルは、パブリック ディレクトリである Web ルート ディレクトリを基準としています

サイト外のファイルを導入したい場合は、次のようにすることができます:

{!!Html::style('//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css')!!}{!!Html::script('//code.angularjs.org/1.2.13/angular.js')!!}

2. URL::asset()

さらに、組み込み URL でasset() メソッドを使用することもできます。 cssファイルとjsファイルをインポートするクラス。

オンサイト CSS と JS を導入する:

<link rel="stylesheet" href="{{ URL::asset('css/bootstrap.css') }}"><script type="text/javascript" src="{{ URL::asset('js/jquery.min.js') }}"></script>

注: デフォルトは、パブリック ディレクトリである Web ルート ディレクトリを基準としています

オフサイト CSS と JS を導入します:

<link rel="stylesheet" href="{{ URL::asset('//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css') }}"><script type="text/javascript" src="{{ URL::asset('//code.angularjs.org/1.2.13/angular.js') }}"></script>