web-dev-qa-db-ja.com

Laravel 5に外部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>
phplaravel-5
70
Mansoor Akhtar

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

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

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

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

お役に立てれば。

古い方法は次のことを覚えておいてください。

{{ Form::script() }}

そして

{{ Form::style() }}

Laravel 5では機能しません。

113
Todor Todorov

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

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

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

あなたはただJavaScriptへのパスを渡すことができます。

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

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

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

'Illuminate\Html\HtmlServiceProvider'

Aliases配列に次の2行を追加してファサードを登録します。

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

32
Jay Dhameliya

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>

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

23
AkshayBandivadekar

私はこのようにして、パブリックフォルダにあなたのcssファイルを置くことを忘れないでください。

例えば私は私のブートストラップのCSSを入れます

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

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

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

この助けを願って

14
Doni

アセットをパブリックディレクトリに配置して、以下を使用してください。

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>
10
adhix11
{{ HTML::style('yourcss.css') }}
{{ HTML::script('yourjs.js') }}
7
Julian Camilleri

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についても同じことができます。

3
Anoop D

わかりましたので、私はバージョン5.2のために把握することができました。あなたは最初にあなたのパブリックフォルダの中にassetフォルダを作成する必要がありますそしてそれにcssフォルダとすべてのcssファイルをそれからそれのようにそれをリンクします：

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

それが役立つことを願っています！

3
Chetan Chitte

最初に、あなたの.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ファイルを対応するフォルダーに入れて、必要な場所でそれらを使用します。ありがとう、そしてこれがお役に立てば幸いです。

3
Foysal Nibir

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

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') !!}
2
miniPax

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

私のバージョン：Laravel Framework 5.7

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

  1. 外部コードをコピーしてください。
  2. 端末でコマンドnpm installを実行します。
  3. 上記のコマンドを実行すると、node_modulesという名前のフォルダが表示されます。
  4. 次にresources/jsに行きます。
  5. ファイルapp.jsを開きます。
  6. 一番下までスクロールしてpasteあなたの外部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. 一番下までスクロールして、pasteあなたの外部スタイルを選びます。
  7. 最後にあなたの端末でコマンドnpm run devを実行します。

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

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

Laravel JavaScript＆CSS Scaffolding

YouTube 素材の編集

1
Ahamed Rasheed

私はパーティーに遅刻するかもしれませんが、単にasset（）関数を使用することによってJSとCSSをLaravel Wayに含めるのは簡単です。

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

それが役立つことを願っています

1
Ryan S