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

81

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>
Mansoor Akhtar
źródło
1
czy możesz oznaczyć pierwszą odpowiedź jako odpowiedź? Ponieważ są to ważne informacje i działa tak, jak prosiłeś.
Kerwin Sneijders

Odpowiedzi:

126

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!

Todor Todorov
źródło
3
Zauważ również, że katalog zasobów w Laravel 5 nie jest powiązany z tą fasadą. To mnie zdezorientowało na sekundę, URL::assetdosłownie wskaże twój folder publiczny.
jeanpier_re
5
Tak to prawda. Możesz także użyć asset()metody pomocniczej. Robi to samo.
Todor Todorov
Dlaczego po prostu nie piszesz src="/js/jquery.js"i href="https://stackoverflow.com/css/somestylesheet.css"?
Adam
Zwykle używam asset()i działa. Czy ktoś może wyjaśnić różnicę?
świt
główna różnica polega na tym, że asset()działa nawet wtedy, gdy uzyskujesz dostęp z podkatalogu, gdzie dodawanie src="/js/jquery.js"nie działa, ponieważ zawsze oczekuje plików na poziomie głównym, a te pliki js nie zostaną znalezione, więc 404s
cnu
34

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'

Jay Dhameliya
źródło
5
Klasy HTML i Form są usuwane z Laravel 5
Mansoor Akhtar
1
Dodałem następujące, ale to jest drukowanie linku na stronie internetowej jako <link media = "all" type = "text / css" rel = "stylesheet" href = " localhost / myapp / public / css / test.css ">
Mansoor Akhtar
1
to rozwiązało mój problem {!! HTML :: style ('public / css / bootstrap.css') !!}
Mansoor Akhtar,
2
Aktywną opiekę nad pakietem HTML przejął Laravel Collective. laravelcollective.com/docs/5.0/html
winkbrace
gdzie dokładnie mamy to napisać, {!! HTML :: script ('js / script.js') !!}, mam problem z połączeniem js
Seeker
24

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

AkshayBandivadekar
źródło
16

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

Doni
źródło
10

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>
adhix11
źródło
6
{{ HTML::style('yourcss.css') }}
{{ HTML::script('yourjs.js') }}
Julian Camilleri
źródło
dlaczego? próbowałeś użyć URL::asset() or app_path()?
Julian Camilleri
2
to rozwiązało mój problem, dzięki {{asset ('public / css / bootstrap.css')}}
Mansoor Akhtar,
1
Zamiast HTMLtego musi Html.
musicliftsme
5

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.

Foysal Nibir
źródło
3

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!

Chetan Chitte
źródło
Mój plik CSS nie był połączony z w moim widoku bloku. Problem polegał na tym, że umieściłem go w / zasoby / aktywa / css / z widokami kasetowymi, ale potrzebowałem rozwiązania, aby umieścić go w / public / asset / css /
Andrew Koper
3

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.

Anoop D.
źródło
Nie jestem pewien, ale myślę, że działa to tylko wtedy, gdy używasz zasobów skompilowanych w Mix (po wygenerowaniu wersjonowanego pliku). ( laravel.com/docs/5.5/mix#sass )
creg
używanie <link rel = "stylesheet" href = "{{mix ('path / file')}}"> to nowy sposób w wersji 5.5 laravel.com/docs/5.5/mix#versioning-and-cache-busting
gtamborero
2

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') !!}
miniPax
źródło
Powiedział: „Form i Html Helper zostały usunięte z tej wersji”. Nie chce jednak używać HTML
Helpera
Jest to sposób na odzyskanie tego wsparcia w Laravel 5.0, a tym samym umożliwienie mu używania składni, do której jest przyzwyczajony, ponieważ wyraźnie stwierdza, że ​​wsparcie zostało usunięte i nie zna innego sposobu na dołączenie plików zewnętrznych.
miniPax
2

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

Ahamed Rasheed
źródło
1

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

Ryan S.
źródło
1

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.
Philcz
źródło
1

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.

Haritsinh Gohil
źródło