web-dev-qa-db-de.com

Laravel Stylesheets und Javascript werden nicht für nicht-Basisrouten geladen

Okay - ich weiß, das ist ein wirklich grundlegendes Thema, aber ich kann es nicht verstehen. Dies ist eine Frage zu Laravel.

Grundsätzlich habe ich meine Stylesheets in meine Standardlayoutansicht eingebettet. Zur Zeit verwende ich nur reguläre CSS, um sie zu verknüpfen, wie zum Beispiel:

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

Es funktioniert gut, wenn ich mich auf einer Ebene mit nur einer Ebene wie/about befinde, aber es funktioniert nicht mehr, wenn ich tiefer gehe, wie/about/me .

Wenn ich mir die Entwicklerkonsole von Chrome anschaue, werden einige der folgenden Fehler angezeigt (nur für die tieferen Routen):

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

Es ist also eindeutig die Suche nach der css im "about" -Ordner - was natürlich kein Ordner ist.

Ich möchte nur, dass die Assets unabhängig von der Route an derselben Stelle gesucht werden.

85
Pete

Für Laravel 4 & 5:

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

URL::asset wird mit Ihrem project/public/ -Ordner verlinkt, also sperren Sie Ihre Skripte dort .


Hinweis: Dazu müssen Sie die " Blade Templating Engine " verwenden. Blade-Dateien verwenden die Erweiterung .blade.php.

153
gan

Laravel 4

Der bessere und korrekte Weg, dies zu tun

CSS hinzufügen

HTML :: style wird mit Ihrem Projekt/public/Ordner verlinkt

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

Hinzufügen von JS

Das HTML :: Skript wird mit Ihrem Projekt/öffentlichen Ordner verknüpft

{{ HTML::script('js/script.js') }}
52
mXX

Sie verwenden relative Pfade für Ihre Assets, wechseln zu einem absoluten Pfad und alles funktioniert (fügen Sie vor "css" einen Schrägstrich ein.

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

in Laravel 5 ,
Es gibt zwei Möglichkeiten, eine js-Datei in Ihre Ansicht zu laden
Zum einen wird HTML-Helfer verwendet, zum anderen Asset-Helfer.
Um den HTML-Helfer verwenden zu können, müssen Sie dieses Paket zunächst über die Befehlszeile installieren:

composer require illuminate/html

dann müssen Sie es erneut anfordern, gehen Sie zu config/app.php und fügen Sie diese Zeile dem Provider-Array hinzu

'Illuminate\Html\HtmlServiceProvider'

dann müssen Sie Aliase für Ihr HTML-Paket definieren. Gehen Sie zu Aliase-Array in config/app.php und fügen Sie dieses hinzu

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

nun ist Ihr HTML-Helper installiert, sodass Sie in Ihren Blade-View-Dateien Folgendes schreiben können:

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

dadurch wird nach Ihrer Datei test.js in Ihrem Projektstammverzeichnis/public/js/test.js gesucht.
/////////////////////////////////////// ///////////////
Um Asset-Helfer anstelle von HTML-Helper zu verwenden, müssen Sie Folgendes in Ihre Ansichtsdateien schreiben:

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

dies sucht nach test.js-Datei in project_root/resources/assets/test.js

9
Salar

Ich schätze, Sie verwenden Laravel 3, wenn ja, legen Sie Ihre CSS/JS-Dateien in einem öffentlichen Ordner ab

public/css
public/js

und rufen Sie es mit Blade-Vorlagen auf

{{ HTML::style('css/style.css'); }}
{{ HTML::script('js/jquery-1.8.2.min.js'); }}
9

ich schlage vor, Sie setzen den Routenfilter auf {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');

});

und Verwenden der Blade-Template-Engine

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

oder mehr auf laravel Verwalten von Dokumenten

6
Andry Yosua

Laravel 5.4 mit Mixhelfer:

<link href="{{ mix('/css/app.css') }}" rel="stylesheet">
<script src="{{ mix('/js/app.js') }}"> </script>
3
Gsub

Legen Sie in Laravel 5.7 Ihre CSS- oder JS-Datei im öffentlichen Verzeichnis ab.

Für CSS:

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

Für JS:

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

in laravel 4 musst du {{ URL::asset('/') }} nur so einfügen: 

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

Gleiches gilt für:

  <script language="JavaScript" src="{{ URL::asset('/') }}js/jquery.js"></script>
  <img src="{{ URL::asset('/') }}img/image.gif">
2
fravemel

Vinsa hätte es beinahe richtig gemacht. Sie sollten hinzufügen 

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

und Skripte sollten ihren normalen Weg gehen 

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

der Grund dafür ist, dass Bilder und andere Dinge mit relativen Pfaden wie Bildquellen- oder Ajax-Anforderungen ohne den angefügten Basispfad nicht ordnungsgemäß funktionieren.

2
Cptmaxon

Am besten fügen Sie meiner Meinung nach BASE-Tag in Ihren HTML-Code ein

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

Es ist also nicht notwendig, solche Dinge zu verwenden 

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

schreib einfach

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

aus ihrer Sicht und es wird funktionieren.

In diesem Modus werden RESTful-URLs und statische Ressourcen wie Images, CSS, Skripts behandelt.

2
vinsa

Besserer Weg, wie zu verwenden,

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

Wenn Sie es hart codieren, sollten Sie wahrscheinlich den vollständigen Pfad (href="http://example.com/public/css/app.css") verwenden. Dies bedeutet jedoch, dass Sie die URLs für Entwicklung und Produktion manuell anpassen müssen.

Eine Alternative zu den oben genannten Lösungen wäre die Verwendung von <link rel="stylesheet" href="URL::to_asset('css/app.css')" /> in Laravel 3 oder <link rel="stylesheet" href="URL::asset('css/app.css')" /> in Laravel 4. Auf diese Weise können Sie Ihren HTML-Code so schreiben, wie Sie es möchten, aber Laravel kann in jeder Umgebung den richtigen Pfad für Sie erstellen. 

1
mckendricks

Angenommen, Sie haben Ihren öffentlichen Ordner nicht umbenannt. Ihre css- und js-Dateien befinden sich in den Unterordnern css und js im öffentlichen Ordner. Jetzt wird Ihr Header sein: 

<link rel="stylesheet" type="text/css" href="/public/css/icon.css"/>
<script type="text/javascript" src="/public/js/jquery.easyui.min.js"></script>
1
Hafsul Maru

Einfach ein weiteres Problem hinzufügen:

Wenn Sie /public mit .htaccess aus Ihrem Projekt entfernen möchten, 

dann können Sie dies verwenden, [Add public vor /css in asset()]

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

[Manchmal ist es nützlich.]

1

In Laravel 5.8

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

habe gerade den Trick für mich gemacht.

0
oceceli

Für Laravel 4: {!! für eine doppelte geschweifte Klammer {{ 
und für Laravel 5 & obige Version: Sie können {!! von {{und !!} by}} in der höheren Version

Wenn Sie JavaScript in einem benutzerdefinierten Verzeichnis gespeichert haben.
Wenn sich beispielsweise IhrjQuery-2.2.0.min.jsim Verzeichnisresources/views/admin/plugins/js/befindet, können Sie am*.blade.phpam Ende des Abschnitts hinzufügen

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

Seit der Higher-End-Version wird auch die Lower-End-Version unterstützt, jedoch nicht umgekehrt

0
Nishanth ॐ

stelle deine Skriptdatei in ein öffentliches Verzeichnis und verwende es (zum Beispiel für userFunctions.js)

<script type="text/javascript" src="{{asset('js/userFunctions.js')}}">
0
user10248738

Der bessere und richtige Weg, dies zu tun:

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