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

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>

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!

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'

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

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

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>

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

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.

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!

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.

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

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

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

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.

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.