Laravel5に外部CSSおよびJSファイルを含める方法

Laravel 5.0を使用していますが、FormとHtml Helperはこのバージョンから削除されています。ヘッダーファイルに、外部のcssファイルとjsファイルを含める方法がわかりません。現在、私はこのコードを使用しています。

<link rel="stylesheet" href="/css/bootstrap.min.css"> <!---  css file  --->
<script type="text/javascript" src="/js/jquery.min.js"></script>

私は正しい方法はこれだと思います：

<script type="text/javascript" src="{{ URL::asset('js/jquery.js') }}"></script>

ここにjs、laravelのapp/publicフォルダーにディレクトリがあります。そこにjquery.jsファイルがあります。関数URL :: assets（）は、必要なURLを生成します。cssについても同じです。

<link rel="stylesheet" href="{{ URL::asset('css/somestylesheet.css') }}" />

お役に立てれば。

古い方法は次の点に注意してください。

{{ Form::script() }}

そして

{{ Form::style() }}

は非推奨であり、Laravel 5では機能しません！

それを試してみてください。

パスをスタイルシートに渡すだけです。

{!! HTML::style('css/style.css') !!}

JavaScriptへのパスを渡すだけです。

{!! HTML::script('js/script.js') !!}

composer.jsonファイルのrequireセクションに次の行を追加し、 composer update "illuminate / html"を実行します： "5。*"。

次の値をproviders配列に追加して、サービスプロバイダーをconfig /app.phpに登録します。

'Illuminate\Html\HtmlServiceProvider'

エイリアス配列に次の2行を追加して、ファサードを登録します。

'Form'=> 'Illuminate\Html\FormFacade', 'HTML'=> 'Illuminate\Html\HtmlFacade'

Laravel 5.1では、

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

アセットフォルダーの場所がパブリックフォルダー内にある場所

私はこの方法を使用します。cssファイルをパブリックフォルダーに置くことを忘れないでください。

たとえば、ブートストラップCSSをオンにします

"root/public/bootstrap/css/bootstrap.min.css"

ヘッダーからアクセスするには：

<link href="{{ asset('bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" >

この助けを願っています

アセットをパブリックディレクトリに配置し、以下を使用します

URL::to()

例

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

{{ HTML::style('yourcss.css') }}
{{ HTML::script('yourjs.js') }}

最初に、.cssまたは.jsファイルをpublicプロジェクトのフォルダーに配置する必要があります。それにサブフォルダーを作成し、ファイルをサブフォルダーに移動することができます。次に、次のことを行う必要があります

<link rel="stylesheet" href="{{asset('css/your_css_file.css')}}">
<script src="{{asset('js/your_js_file.js')}}"></script>

私の例では、cssとjsという2つのサブフォルダーを作成しました。すべてのファイル.cssと.jsファイルを対応するフォルダーに入れて、好きな場所で使用します。ありがとう、そしてこれがあなたを助けることを願っています。

さて、バージョン5.2を理解することができました。最初にパブリックフォルダーにアセットフォルダーを作成し、次にcssフォルダーとすべてのcssファイルをその中に配置してから次のようにリンクする必要があります。

<link href="assets/css/bootstrap.min.css" rel="stylesheet">

お役に立てば幸いです。

Laravel 5.5にはmixが付属しており、Elixirの代わりに、外部css（sass）をresources / assets / css（sass）に抽出して、app.css（scss）にインポートするか、node_moduleフォルダーへの正しいパスを指定できます。ライブラリととして使用することができます

<link rel="stylesheet" href="{{ mix('css/app.css') }}" >

Javascriptでも同じことができます。

まず、IlluminateHtmlヘルパークラスをインストールする必要があります。

composer require "illuminate/html":"5.0.*"

次に、/ config / app.phpを開き、次のように更新する必要があります。

'providers' => [

...

Illuminate\Html\HtmlServiceProvider::class,
],

'aliases' => [

...

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

動作していることを確認するには、次のコマンドを使用します。

php artisan tinker
> Form::text('foo')
"<input name=\"foo\" type=\"text\">"

ファイルに外部CSSを含めるには、次の構文を使用します。

{!! HTML::style('foo/bar.css') !!}

正確で安全な方法

ページに追加する外部ファイル.cssまたは.jsファイルがある場合！

私のバージョン：Laravel Framework 5.7

外部.jsファイルを追加したい場合。

1. 外部コードをコピーします。
2. npm installターミナルでコマンドを実行します。
3. 上記のコマンドを実行すると、という名前のフォルダが表示されますnode_modules。
4. 次に、resources / jsに移動します。
5. ファイルを開きますapp.js。
6. 一番下までスクロールして貼り付けます外部JSます。
7. 最後npm run devに、ターミナルでコマンドを実行します。

スクリプトが更新され、コンパイルされてに移動されpublic/js/app.jsます。.jsパブリックフォルダにファイルを追加しても、ページには影響しません。

外部.cssファイルを追加したい場合。

1. 外部スタイルをコピーします。
2. npm installターミナルでコマンドを実行します。
3. 上記のコマンドを実行すると、という名前のフォルダが表示されますnode_modules。
4. 次に、resources / sassに移動します。
5. ファイルを開きますapp.scss。
6. 一番下までスクロールして、外部スタイルを貼り付けます。
7. 最後npm run devに、ターミナルでコマンドを実行します。

スクリプトが更新され、コンパイルされてに移動されpublic/css/app.cssます。.cssパブリックフォルダにファイルを追加しても、ページには影響しません。

• 外部の.cssと.jsを追加する最も簡単で安全な方法。

Laravel JavaScript＆CSSスキャフォールディング

YouTubeコンパイルアセット

パーティーに遅れるかもしれませんが、asset（）関数を使用するだけで、JSとCSSをLaravelWayに含めるのは簡単です。

例えば <link rel="stylesheet" href="{{ asset('css/app.css') }}" />

お役に立てば幸いです

私は利用しています

<script type="text/javascript" src="{{ URL::asset('js/jquery.js') }}"></script> 
for javascript and 
     <link rel="stylesheet" href="{{ URL::asset('css/main.css') }}">
for css, this points to the public directory, so you need to keep your css and js files there.

以下のコードで指定されているように、外部のcssファイルとjsファイルを含める方法はたくさんありますが、そのうちの1つを選択できます。すべてテストしましたが、同じように機能します。

<link rel="stylesheet" href="{{ asset('css/stylesheet.css') }}" /><!--Recommended-->
<link rel="stylesheet" href="{{ URL::asset('css/somestylesheet.css') }}" />
<link rel="stylesheet" href="{{ URL::to('css/otherstylesheet.css') }}" />
<link rel="stylesheet" href="{{ url('css/anotherstylesheet.css') }}" />

多分それをロードするより多くの方法があります。

ただし、パブリックフォルダ以外からcssとjsをロードする場合は、を使用することをお勧めしますLaravel mix。