104

わかりました。これは本当に初歩的な問題だと思いますが、理解できません。これはLaravelに関する質問です。

基本的に、デフォルトのレイアウトビューにスタイルシートを埋め込んでいます。私は現在、通常のcssを使用してそれらをリンクしています。

<link rel="stylesheet" href="css/app.css" />

/ aboutのような単一レベルのルートにいるときはうまく機能しますが、/ about/meのように深くなると機能しなくなります。

Chromeの開発者コンソールを見ると、次のエラーがいくつか表示されます（より深いルートの場合のみ）。

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://example.dev/about/css/app.css".

したがって、明らかに、「about」フォルダ内のcssを探しています。もちろんこれはフォルダではありません。

ルートに関係なく、同じ場所でアセットを探したいだけです。

4

19 に答える 19

174

Laravel 4＆5の場合：

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

URL::assetフォルダにリンクするproject/public/ので、そこにスクリプトを入れてください。

注：このためには、「ブレードテンプレートエンジン」を使用する必要があります。ブレードファイルは.blade.php拡張子を使用します。

于 2013-05-15T12:58:11.933 に答える
53

Laravel 4

これを行うためのより良い正しい方法

CSSの追加

HTML::styleはプロジェクト/public/フォルダにリンクします

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

JSの追加

HTML::scriptはプロジェクト/public/フォルダにリンクします

{{ HTML::script('js/script.js') }}
于 2013-09-29T13:50:03.717 に答える
13

アセットに相対パスを使用していて、絶対パスに変更すると、すべてが機能します（「css」の前にスラッシュを追加します）。

<link rel="stylesheet" href="/css/app.css" />
于 2013-03-05T20:50:27.907 に答える
10

Laravel 5では
、ビューにjsファイルをロードする2つの方法があります。1つ
はhtmlヘルパーを使用する方法、2つ目はアセットヘルパーを使用する方法です。
htmlヘルパーを使用するには、最初にコマンドラインからこのパッケージをインストールする必要があります。

composer require illuminate/html

次に、それを要求する必要があるので、config / app.phpに移動し、この行をプロバイダー配列に追加します

'Illuminate\Html\HtmlServiceProvider'

次に、htmlパッケージのエイリアスを定義する必要があるため、config / app.phpのエイリアス配列に移動して、これを追加します。

'Html'     => 'Illuminate\Html\HtmlFacade'

これでhtmlヘルパーがインストールされたので、ブレードビューファイルに次のように記述できます。

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

これにより、project_root / public / js/test.jsでtest.jsファイルが検索されます。
////////////////////////////////////////////////// ////////////
htmlヘルパーの代わりにアセットヘルパーを使用するには、ビューファイルに次のようなsthを書き込む必要があります。

<script src="{{ URL::asset('test.js') }}"></script>

これにより、project_root / resources / Assets/test.jsでtest.jsファイルが検索されます

于 2015-05-03T07:42:08.010 に答える
9

Laravel3とCSS/JSファイルをこのようなパブリックフォルダー内で使用している場合

public/css
public/js

次に、このようなブレードテンプレートを使用してそれらを呼び出すことができます

{{ HTML::style('css/style.css'); }}
{{ HTML::script('js/jquery-1.8.2.min.js'); }}
于 2013-03-05T20:47:05.373 に答える
6

{project}/application/routes.phpの前にルートフィルターに配置することをお勧めします

Route::filter('before', function()
{
    // Do stuff before every request to your application...    
    Asset::add('jquery', 'js/jquery-2.0.0.min.js');
    Asset::add('style', 'template/style.css');
    Asset::add('style2', 'css/style.css');

});

ブレードテンプレートエンジンを使用する

{{ Asset::styles() }}
{{ Asset::scripts(); }}

Laravelのアセット管理に関するドキュメント

于 2013-05-22T04:16:53.160 に答える
3

laravel 4あなたはこのように貼り付ける必要があります{{ URL::asset('/') }}： 

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

それは同じです：

  <script language="JavaScript" src="{{ URL::asset('/') }}js/jquery.js"></script>
  <img src="{{ URL::asset('/') }}img/image.gif">
于 2014-03-12T07:46:39.073 に答える
3

ミックスヘルパー付きLaravel5.4：

<link href="{{ mix('/css/app.css') }}" rel="stylesheet">
<script src="{{ mix('/js/app.js') }}"> </script>
于 2017-04-01T00:08:43.683 に答える
3

Laravel 5.7では、CSSまたはJSファイルをパブリックディレクトリに配置します。

CSSの場合：

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

JSの場合：

<script type="text/javascript" src="{{ asset('bootstrap.js') }}"></script>
于 2018-11-14T12:01:04.460 に答える
2

私の意見では、HTMLにBASEタグを追加するのが最善の方法です。

<base href="/" target="_top">

したがって、次のようなものを使用する必要はありません

{{ HTML::script('js/jquery/jquery-1.11.1.min.js'); }}

入力するだけ

<script src="js/jquery/jquery-1.11.1.min.js"></script>

あなたの見解では、それは機能します。

この方法では、RESTful URLと静的リソースを画像、css、スクリプトとして処理します。

于 2014-11-01T23:34:01.957 に答える
2

ヴィンサはほぼ正しかったので、追加する必要があります 

<base href="{{URL::asset('/')}}" target="_top">

スクリプトは通常のパスに配置する必要があります

<script src="js/jquery/jquery-1.11.1.min.js"></script>

これは、画像や、画像ソースやajaxリクエストなどの相対パスを持つその他のものは、ベースパスが接続されていないと正しく機能しないためです。

于 2016-01-06T10:44:36.987 に答える
1

ハードコーディングする場合は、おそらくフルパス（href="http://example.com/public/css/app.css"）を使用する必要があります。ただし、これは、開発と本番用にURLを手動で調整する必要があることを意味します。

上記のソリューションの代わりに、<link rel="stylesheet" href="URL::to_asset('css/app.css')" />Laravel3またはLaravel4で使用<link rel="stylesheet" href="URL::asset('css/app.css')" />することもできます。これにより、HTMLを希望どおりに記述できるようになるだけでなく、Laravelが任意の環境で適切なパスを生成できるようになります。

于 2013-03-06T06:15:58.427 に答える
1

次のように使用するためのより良い方法、

<link rel="stylesheet" href="{{asset('assets/libraries/css/app.css')}}">
于 2017-05-09T11:24:18.380 に答える
1

パブリックフォルダの名前を変更していないとします。cssおよびjsファイルは、パブリックフォルダーのcssおよびjsサブフォルダーにあります。これで、ヘッダーは次のようになります。

<link rel="stylesheet" type="text/css" href="/public/css/icon.css"/>
<script type="text/javascript" src="/public/js/jquery.easyui.min.js"></script>
于 2017-05-30T03:45:24.230 に答える
1

別の問題を追加するだけです：

/publicを使用してプロジェクトから削除する場合は.htaccess、

次に、これを使用できます[内部のpublic前に追加]/cssasset()

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

[時々、それは役に立ちます。]

于 2017-10-20T01:56:44.790 に答える
0

Laravel 4の場合：{!! ダブルカーリーブレースの場合{{
およびLaravel5以降のバージョンの場合：{!! ハイエンドバージョンでは{{and!!}by}}

JavaScriptをカスタム定義のディレクトリに配置した場合。
たとえばjQuery-2.2.0.min.js、ディレクトリの下に配置されてresources/views/admin/plugins/js/いる*.blade.php場合は、セクションの最後に次のように追加できます。

<script src="{!! asset('resources/views/admin/plugins/js/jQuery-2.2.0.min.js') !!}"></script>

ハイエンドバージョンはローエンドバージョンもサポートしているため、その逆はできません。

于 2018-08-20T10:35:21.677 に答える
0

これを行うためのより良い正しい方法：

<link rel="stylesheet" href="{{ asset('assets/css/bootstrap.min.css') }}">
于 2019-03-29T10:22:01.750 に答える
0

Laravel5.8では

<script src="{{asset('js/customPath1/customPath2/customjavascript.js')}}"></script>

ちょうど私のためにトリックを作りました。

于 2019-07-13T20:08:00.860 に答える
0

スクリプトファイルをパブリックディレクトリに配置してから使用します（たとえば、userFunctions.jsの場合）

<script type="text/javascript" src="{{asset('js/userFunctions.js')}}">
于 2019-07-28T08:33:01.600 に答える