So fügen Sie externe CSS- und JS-Dateien in Laravel 5 ein

79

Ich verwende Laravel 5.0, das Formular und der HTML-Helfer wurden aus dieser Version entfernt. Ich weiß nicht, wie ich externe CSS- und JS-Dateien in meine Header-Datei aufnehmen soll. Derzeit verwende ich diesen Code.

<link rel="stylesheet" href="/css/bootstrap.min.css"> <!---  css file  --->
<script type="text/javascript" src="/js/jquery.min.js"></script>
Mansoor Akhtar
quelle
1
Könnten Sie die oberste Antwort als Antwort markieren? Da es sich um gültige Informationen handelt und wie von Ihnen gefragt funktioniert.
Kerwin Sneijders

Antworten:

125

Ich denke, dass der richtige Weg dieser ist:

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

Hier habe ich ein jsVerzeichnis im app/publicOrdner der Laravel . Dort habe ich eine jquery.jsDatei. Die Funktion URL :: asset () erzeugt die für Sie erforderliche URL. Gleiches gilt für die CSS:

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

Hoffe das hilft.

Denken Sie daran, dass die alten Mehods:

{{ Form::script() }}

und

{{ Form::style() }}

sind veraltet und funktionieren in Laravel 5 nicht!

Todor Todorov
quelle
3
Beachten Sie auch, dass das Asset-Verzeichnis in Laravel 5 dieser Fassade nicht zugeordnet ist. Das hat mich für eine Sekunde verwirrt und URL::assetwird buchstäblich auf Ihren öffentlichen Ordner verweisen.
jeanpier_re
5
Ja, das ist richtig. Sie können auch die asset()Hilfsmethode verwenden. Es macht die gleiche Arbeit.
Todor Todorov
Warum schreibst du nicht einfach src="/js/jquery.js"und href="https://stackoverflow.com/css/somestylesheet.css"?
Adam
Ich benutze normalerweise asset()und es funktioniert. Kann jemand den Unterschied erklären?
Morgengrauen
Der Hauptunterschied besteht darin, dass es auch dann asset()funktioniert, wenn Sie von einem Unterverzeichnis aus zugreifen, in dem das Hinzufügen src="/js/jquery.js"nicht funktioniert, da immer Dateien auf Stammebene erwartet werden und diese js-Dateien nicht gefunden werden, daher 404s
cnu
34

Versuch es.

Sie können einfach den Pfad zum Stylesheet übergeben.

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

Sie können einfach den Pfad zum Javascript übergeben.

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

Fügen Sie die folgenden Zeilen in den erforderlichen Abschnitt der Datei composer.json ein und führen Sie das Composer-Update "illuminate / html" aus: "5. *" .

Registrieren Sie den Dienstanbieter in config / app.php, indem Sie dem Anbieter-Array den folgenden Wert hinzufügen:

'Illuminate\Html\HtmlServiceProvider'

Registrieren Sie Fassaden, indem Sie diese beiden Zeilen in das Aliase-Array einfügen:

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

Jay Dhameliya
quelle
5
Die HTML- und Formularklassen werden von Laravel 5
Mansoor Akhtar am
1
Ich habe Folgendes hinzugefügt, aber dies druckt den Link auf der Webseite als <link media = "all" type = "text / css" rel = "stylesheet" href = " localhost / myapp / public / css / test.css ">
Mansoor Akhtar
1
das hat mein Problem gelöst {!! HTML :: style ('public / css / bootstrap.css') !!}
Mansoor Akhtar
2
Die aktive Wartung des HTML-Pakets wurde vom Laravel Collective übernommen. laravelcollective.com/docs/5.0/html
winkbrace
wo genau müssen wir das schreiben, {!! HTML :: script ('js / script.js') !!}, ich habe js Verbindungsproblem
Seeker
24

In 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>

Der Speicherort des Assets-Ordners befindet sich im öffentlichen Ordner

AkshayBandivadekar
quelle
16

Ich benutze diese Methode, vergessen Sie nicht, Ihre CSS-Datei in öffentlichen Ordner zu legen.

Zum Beispiel habe ich meine Bootstrap-CSS aktiviert

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

Zugriff vom Header:

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

Ich hoffe das hilft

Doni
quelle
10

Platzieren Sie Ihre Assets in einem öffentlichen Verzeichnis und verwenden Sie Folgendes

URL::to()

Beispiel

<link rel="stylesheet" type="text/css" href="{{ URL::to('css/style.css') }}">
<script type="text/javascript" src="{{ URL::to('js/jquery.min.js') }}"></script>
adhix11
quelle
6
{{ HTML::style('yourcss.css') }}
{{ HTML::script('yourjs.js') }}
Julian Camilleri
quelle
Woher? Hast du es versucht URL::asset() or app_path()?
Julian Camilleri
2
Dies löste mein Problem dank {{Asset ('public / css / bootstrap.css')}}
Mansoor Akhtar
1
Stattdessen HTMLmuss es sein Html.
musicliftsme
5

Zuerst müssen Sie Ihre .cssoder .jsDateien in den publicOrdner Ihres Projekts legen . Sie können Unterordner erstellen und die Dateien in den Unterordner verschieben. Dann müssen Sie die folgenden Schritte ausführen

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

In meinem Beispiel habe ich zwei Unterordner namens css und js erstellt. Ich lege alle .cssund .jsDateien in die entsprechenden Ordner und verwende sie, wo immer ich will. Vielen Dank und hoffe, das hilft Ihnen.

Foysal Nibir
quelle
3

Ok, also konnte ich für die Version 5.2 herausfinden. Sie müssen zuerst einen Assets-Ordner in Ihrem öffentlichen Ordner erstellen, dann den CSS-Ordner und alle CSS-Dateien darin ablegen und ihn dann wie folgt verknüpfen:

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

Hoffentlich hilft das!

Chetan Chitte
quelle
Meine CSS-Datei wurde in meiner Blade-Ansicht nicht verlinkt. Das Problem war, dass ich es mit den Blade-Ansichten in / resources / Assets / CSS / abgelegt hatte, aber die Lösung war, dass ich es in / public / Assets / CSS /
Andrew Koper
3

Laravel 5.5 wird mit Mix geliefert, dem Ersatz für Elixir. Das externe CSS (Sass) kann in Ressourcen / Assets / CSS (Sass) extrahiert und in app.css (SCSS) importiert werden. Oder geben Sie den richtigen Pfad zu Ihrem Ordner node_module an, der das enthält Bibliothek und kann als verwendet werden

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

Das gleiche kann auch für Javascript gemacht werden.

Anoop D.
quelle
Ich bin nicht sicher, aber ich denke, es funktioniert nur, wenn Sie Mix-kompilierte Ressourcen verwenden (nach dem Generieren der versionierten Datei). ( laravel.com/docs/5.5/mix#sass )
creg
Die Verwendung von <link rel = "stylesheet" href = "{{mix ('path / file')}}"> ist der neue Weg unter 5.5 laravel.com/docs/5.5/mix#versioning-and-cache-busting
gtamborero
2

Zuerst müssen Sie die Hilfsklasse Illuminate Html installieren:

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

Als nächstes müssen Sie /config/app.php öffnen und wie folgt aktualisieren:

'providers' => [

...

Illuminate\Html\HtmlServiceProvider::class,
],

'aliases' => [

...

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

Verwenden Sie den folgenden Befehl, um zu bestätigen, dass es funktioniert:

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

Verwenden Sie die folgende Syntax, um externes CSS in Ihre Dateien aufzunehmen:

{!! HTML::style('foo/bar.css') !!}
miniPax
quelle
Er sagte: "Form und Html Helper werden aus dieser Version entfernt". Er will HTML Helper allerdings nicht benutzen ..
MaXi32
Dies ist eine Möglichkeit, diese Unterstützung wieder in Laravel 5.0 zu erhalten und ihm so die Verwendung einer gewohnten Syntax zu ermöglichen, da er ausdrücklich angibt, dass die Unterstützung entfernt wurde und er keine andere Möglichkeit kennt, externe Dateien einzuschließen.
MiniPax
2

RICHTIGER UND SICHERER WEG


Wenn Sie eine externe .cssoder .jsDatei zu Ihrer Seite hinzufügen möchten!

Meine Version: Laravel Framework 5.7

Wenn Sie eine externe .jsDatei hinzufügen möchten ..

  1. Kopieren Sie Ihre externen Codes.
  2. Führen Sie den Befehl npm installin Ihrem Terminal aus.
  3. Wenn der obige Befehl ausgeführt wird, sehen Sie einen Ordner mit dem Namen node_modules.
  4. Gehen Sie dann zu resources / js .
  5. Datei öffnen app.js.
  6. Scrollen Sie nach unten und fügen Sie Ihre externe JS ein.
  7. Führen Sie schließlich den Befehl npm run devin Ihrem Terminal aus.

Ihre Skripte werden aktualisiert und kompiliert und verschoben public/js/app.js. Das Hinzufügen einer .jsDatei im öffentlichen Ordner wirkt sich nicht auf Ihre Seite aus.


Wenn Sie eine externe .cssDatei hinzufügen möchten ..

  1. Kopieren Sie Ihre externen Stile.
  2. Führen Sie den Befehl npm installin Ihrem Terminal aus.
  3. Wenn der obige Befehl ausgeführt wird, sehen Sie einen Ordner mit dem Namen node_modules.
  4. Dann gehen Sie zu Ressourcen / Sass .
  5. Datei öffnen app.scss.
  6. Scrollen Sie nach unten und fügen Sie Ihre externen Stile ein.
  7. Führen Sie schließlich den Befehl npm run devin Ihrem Terminal aus.

Ihre Skripte werden aktualisiert und kompiliert und verschoben public/css/app.css. Das Hinzufügen einer .cssDatei im öffentlichen Ordner wirkt sich nicht auf Ihre Seite aus.

  • Einfachste und sicherste Möglichkeit, externe CSS- und JS-Dateien hinzuzufügen.

Laravel JavaScript & CSS Gerüst

YouTube- Kompilierung von Assets

Ahamed Rasheed
quelle
1

Ich komme vielleicht zu spät zur Party, aber es ist einfach, JS und CSS auf die Laravel-Art einzuschließen, indem ich einfach die Asset () -Funktion verwende

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

hoffentlich hilft das

Ryan S.
quelle
1

Ich habe Gebrauch gemacht

<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.
Philcz
quelle
0

Es gibt viele Möglichkeiten, externe CSS- und JS-Dateien einzuschließen, wie im folgenden Code angegeben, aber Sie können eine davon auswählen. Ich habe sie alle getestet. Sie funktionieren gleich.

<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') }}" />

Vielleicht gibt es mehr Möglichkeiten, es zu laden.

Beachten Sie jedoch, dass es besser ist, CSS und JS aus einem anderen als einem öffentlichen Ordner zu laden, wenn Sie sie laden Laravel mix.

Haritsinh Gohil
quelle