it-swarm.com.de

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

Ich benutze Laravel 5.0, das Formular und der HTML-Helper werden aus dieser Version entfernt. 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>
66
Mansoor Akhtar

Ich denke, der richtige Weg ist dieser:

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

Hier habe ich ein js-Verzeichnis im app/public-Ordner der Laravel. Dort habe ich eine jquery.js-Datei. Die Funktion URL :: asset () erzeugt die notwendige URL für Sie. Gleiches für die CSS:

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

Hoffe das hilft.

Denken Sie daran, dass die alten Methoden: 

{{ Form::script() }}

und

{{ Form::style() }}

sind veraltet und funktionieren in Laravel 5 nicht!

106
TodStoychev

Versuch es.

Sie können den Pfad einfach an das Stylesheet übergeben.

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

Sie können den Pfad zum Javascript einfach weitergeben.

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

Fügen Sie die folgenden Zeilen in den Requirement-Abschnitt von composer.json file ein und führen Sie composer update "illuminate/html" aus: "5. *" .

Registrieren Sie den Dienstanbieter in config/app.php , indem Sie den folgenden Wert in das Provider-Array einfügen:

'Illuminate\Html\HtmlServiceProvider'

Registrieren Sie Fassaden, indem Sie diese beiden Zeilen im Alias-Array hinzufügen:

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

32
Jay Dhameliya

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

22

ich verwende diese Weise, vergessen Sie nicht, Ihre CSS-Datei in den öffentlichen Ordner zu legen.

zum beispiel lege ich meine bootstrap css an 

"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

12
Doni

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

Laravel 5.5 wird mit mix geliefert, der Ersatz für Elixir, das externe CSS (sass) kann in resources/assets/css (sass) extrahiert und in app.css (scss) importiert werden oder geben Sie den korrekten Pfad zu Ihrem node_module-Ordner 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.

3
Anoop D

Ok, also konnte ich die Version 5.2 herausfinden. Sie müssen zunächst den Ordner "Assets" in Ihrem öffentlichen Ordner erstellen, dann den Ordner "css" und alle darin enthaltenen CSS-Dateien ablegen und dann wie folgt verknüpfen: 

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

Hoffentlich hilft das!

3
Chetan Chitte

Zuerst müssen Sie Ihre .css- oder .js-Dateien im Ordner public Ihres Projekts ablegen. Sie können dazu Unterordner erstellen und die Dateien in den Unterordner verschieben. Dann musst du folgendes tun

<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 .css- und .js-Dateien in die entsprechenden Ordner und verwende sie wo immer ich möchte. Vielen Dank und hoffe das hilft dir.

3
Foysal Nibir

Zuerst müssen Sie die Illuminate Html-Helper-Klasse installieren:

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

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

'providers' => [

...

Illuminate\Html\HtmlServiceProvider::class,
],

'aliases' => [

...

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

Um zu bestätigen, dass es funktioniert, verwenden Sie den folgenden Befehl:

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

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

{!! HTML::style('foo/bar.css') !!}
2
miniPax

Ich komme zu spät zur Party, aber es ist einfach, JS und CSS the Laravel Way einzubinden, indem Sie einfach die Funktion asset () verwenden

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

Hoffentlich hilft das

1
Ryan S

Wenn Sie eine externe .css- oder .js-Datei haben, die Sie Ihrer Seite hinzufügen können!

Meine Version: Laravel Framework 5.7

Wenn Sie eine externe .js-Datei hinzufügen möchten ..

  1. Kopieren Sie Ihre externen Codes.
  2. Führen Sie in Ihrem Terminal den Befehl npm install aus.
  3. Wenn der obige Befehl ausgeführt wird, können Sie einen Ordner mit dem Namen node_modules sehen.
  4. Dann gehen Sie zu resources/js.
  5. Datei app.js öffnen.
  6. Scrollen Sie nach unten und Einfügen Ihres externen JS.
  7. Führen Sie schließlich den Befehl npm run dev in Ihrem Terminal aus.

ihre Skripte werden aktualisiert, kompiliert und nach public/js/app.js verschoben. Das Hinzufügen einer .js-Datei in einem öffentlichen Ordner wirkt sich nicht auf Ihre Seite aus.


Wenn Sie eine externe .css-Datei hinzufügen möchten ..

  1. Kopieren Sie Ihre externen Stile.
  2. Führen Sie in Ihrem Terminal den Befehl npm install aus.
  3. Wenn der obige Befehl ausgeführt wird, können Sie einen Ordner mit dem Namen node_modules sehen.
  4. Dann gehe zu resources/sass.
  5. Datei app.scss öffnen.
  6. Scrollen Sie nach unten und Einfügen Ihre externen Stile.
  7. Führen Sie schließlich den Befehl npm run dev in Ihrem Terminal aus.

ihre Skripte werden aktualisiert, kompiliert und nach public/css/app.css verschoben. Das Hinzufügen einer .css-Datei in einem öffentlichen Ordner wirkt sich nicht auf Ihre Seite aus.

  • Die einfachste und sicherste Möglichkeit, Ihre externen .css und .js hinzuzufügen.

Laravel JavaScript & CSS Gerüste

YouTube Assets zusammenstellen

0
Ahamed Rasheed