Jak dołączyć zewnętrzny plik CSS i JS do Laravel 5

Używam Laravel 5.0, Form i Html Helper są usunięte z tej wersji, nie wiem, jak dołączyć zewnętrzne pliki css i js do mojego pliku nagłówkowego. Obecnie używam tego kodu.

<link rel="stylesheet" href="/css/bootstrap.min.css"> <!---  css file  --->
<script type="text/javascript" src="/js/jquery.min.js"></script>

Myślę, że właściwy sposób to ten:

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

Tutaj mam jskatalog w app/publicfolderze laravel . Tam mam jquery.jsplik. Funkcja URL :: asset () generuje niezbędny adres URL. To samo dotyczy CSS:

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

Mam nadzieję że to pomoże.

Pamiętaj, że stare metody:

{{ Form::script() }}

i

{{ Form::style() }}

są przestarzałe i nie będą działać w Laravel 5!

Spróbuj.

Możesz po prostu przekazać ścieżkę do arkusza stylów.

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

Możesz po prostu przekazać ścieżkę do javascript.

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

Dodaj następujące wiersze w wymaganej sekcji pliku composer.json i uruchom aktualizację kompozytora „illuminate / html”: „5. *” .

Zarejestruj usługodawcę w config / app.php , dodając następującą wartość do tablicy dostawców:

'Illuminate\Html\HtmlServiceProvider'

Zarejestruj fasady, dodając te dwie linie do tablicy aliasów:

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

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

Gdzie lokalizacja folderu zasobów znajduje się w folderze publicznym

używam w ten sposób, nie zapomnij umieścić swojego pliku css w folderze publicznym.

na przykład włączam mój bootstrap css

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

dostęp z nagłówka:

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

Mam nadzieję, że to pomoże

Umieść swoje zasoby w katalogu publicznym i użyj następujących

URL::to()

przykład

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

Najpierw musisz umieścić swoje pliki .csslub .jsw publicfolderze swojego projektu. Możesz tworzyć do niego podfoldery i przenosić pliki do podfolderów. Następnie musisz wykonać następujące czynności

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

W moim przykładzie utworzyłem dwa podfoldery o nazwach css i js. Umieszczam wszystkie pliki .cssi .jsw odpowiednich folderach i używam ich w dowolnym miejscu . Dziękuję i mam nadzieję, że to pomoże.

Ok, więc udało mi się znaleźć wersję 5.2. Najpierw musisz utworzyć folder zasobów w folderze publicznym, a następnie umieścić w nim folder css i wszystkie pliki css, a następnie połączyć go w następujący sposób:

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

Mam nadzieję, że to pomoże!

Laravel 5.5 zawiera mix, zamiennik dla Elixir, zewnętrzny css (sass) można wyodrębnić do zasobów / asset / css (sass) i zaimportować do app.css (scss) lub podać poprawną ścieżkę do folderu node_module, który zawiera biblioteki i może być używany jako

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

To samo można zrobić dla JavaScript.

Najpierw musisz zainstalować klasę pomocniczą Illuminate Html:

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

Następnie musisz otworzyć /config/app.php i zaktualizować w następujący sposób:

'providers' => [

...

Illuminate\Html\HtmlServiceProvider::class,
],

'aliases' => [

...

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

Aby potwierdzić, że działa, użyj następującego polecenia:

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

Aby dołączyć zewnętrzny plik CSS do swoich plików, użyj następującej składni:

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

PRAWIDŁOWY I BEZPIECZNY SPOSÓB

Jeśli masz plik zewnętrzny .csslub .jsplik do dodania do swojej strony!

Moja wersja: Laravel Framework 5.7

Jeśli chcesz dodać .jsplik zewnętrzny ...

1. Skopiuj swoje kody zewnętrzne.
2. Uruchom polecenie npm installw swoim terminalu.
3. Po wykonaniu powyższego polecenia możesz zobaczyć folder o nazwie node_modules.
4. Następnie przejdź do resources / js .
5. Otwórz plik app.js.
6. Przewiń w dół i wklej zewnętrzny JS.
7. Na koniec uruchom polecenie npm run devw swoim terminalu.

Twoje skrypty zostaną zaktualizowane, a następnie skompilowane i przeniesione do public/js/app.js. dodanie .jspliku do folderu publicznego nie wpłynie na twoją stronę.

Jeśli chcesz dodać .cssplik zewnętrzny ...

1. Skopiuj swoje style zewnętrzne.
2. Uruchom polecenie npm installw swoim terminalu.
3. Po wykonaniu powyższego polecenia możesz zobaczyć folder o nazwie node_modules.
4. Następnie przejdź do zasobów / sass .
5. Otwórz plik app.scss.
6. Przewiń w dół i wklej swoje style zewnętrzne.
7. Na koniec uruchom polecenie npm run devw swoim terminalu.

Twoje skrypty zostaną zaktualizowane, a następnie skompilowane i przeniesione do public/css/app.css. dodanie .csspliku do folderu publicznego nie wpłynie na twoją stronę.

• Najłatwiejszy i najbezpieczniejszy sposób dodawania zewnętrznych plików .css i .js.

Laravel JavaScript & CSS Scaffolding

Kompilowanie zasobów YouTube

Mogę się spóźnić na imprezę, ale łatwo jest dołączyć JS i CSS w Laravel Way, używając po prostu funkcji asset ()

na przykład <link rel="stylesheet" href="{{ asset('css/app.css') }}" />

Mam nadzieję, że to pomoże

Korzystałem z

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

Istnieje wiele sposobów dołączania zewnętrznych plików css i js, jak określono w poniższym kodzie, ale możesz wybrać jeden z nich, przetestowałem je wszystkie, działają tak samo.

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

Może jest więcej sposobów, aby go załadować.

ale pamiętaj, że jeśli ładujesz css i js z innego folderu niż publiczny, lepiej go użyć Laravel mix.