Як включити зовнішній файл CSS та JS до Laravel 5

Я використовую Laravel 5.0, помічник форми та Html видаляються з цієї версії, я не знаю, як включити зовнішні файли css та js до мого заголовного файлу. На даний момент я використовую цей код.

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

Я думаю, що правильним є такий:

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

Тут у мене є jsкаталог у app/publicпапці laravel . Там у мене є jquery.jsфайл. Функція URL :: activ () видає необхідну для вас URL-адресу. Те саме для css:

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

Сподіваюся, це допомагає.

Майте на увазі, що старі мелоди:

{{ Form::script() }}

і

{{ Form::style() }}

застаріли і не працюватимуть у Laravel 5!

Спробуй це.

Ви можете просто передати шлях до таблиці стилів.

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

Ви можете просто передати шлях до JavaScript.

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

Додайте наступні рядки до розділу вимагати файлу composer.json і запустіть оновлення композитора "illuminate / html": "5. *" .

Зареєструйте постачальника послуг у config / app.php , додавши в масив постачальників таке значення:

'Illuminate\Html\HtmlServiceProvider'

Зареєструйте фасади, додавши ці два рядки в масив псевдонімів:

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

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

Де розташування папки активів знаходиться всередині загальної папки

я використовую цей спосіб, не забудьте помістити ваш файл css у загальну папку.

Наприклад, я поклав свій css bootstrap

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

для доступу з заголовка:

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

сподіваюся, це допоможе

Розмістіть свої активи в загальнодоступному каталозі та використовуйте наступне

URL::to()

приклад

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

Спочатку вам потрібно помістити ваші файли .cssабо .jsфайли в publicпапку вашого проекту. Ви можете створити в ній підпапки та перемістити файли у підпапку. Тоді вам доведеться зробити наступне

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

У своєму прикладі я створив дві підпапки під назвою css та js. Я поміщаю всі файли .cssта .jsу відповідні папки та використовую їх де завгодно, де завгодно. Дякуємо і сподіваємось, це допоможе вам.

Гаразд, я зміг розібратися з версією 5.2. Спочатку потрібно створити папку активів у вашій загальнодоступній папці, потім помістити в неї папку css та всі файли css, а потім зв’язати її так:

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

Сподіваюся, це допоможе!

Laravel 5.5 поставляється з сумішшю, заміною Elixir, зовнішній css (sass) може бути витягнутий до resources / assets / css (sass) та імпортувати до app.css (scss) або вказати правильний шлях до вашої папки node_module, що містить бібліотека і може використовуватися як

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

Те саме можна зробити і для Javascript.

Спочатку вам потрібно встановити допоміжний клас Illuminate Html:

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

Далі потрібно відкрити /config/app.php та оновити наступним чином:

'providers' => [

...

Illuminate\Html\HtmlServiceProvider::class,
],

'aliases' => [

...

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

Щоб підтвердити, що він працює, використовуйте таку команду:

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

Для включення зовнішнього css у ваші файли використовуйте такий синтаксис:

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

ПРАВИЛЬНИЙ І БЕЗПЕЧНИЙ ШЛЯХ

Якщо у вас є зовнішній файл .cssабо .jsфайл для додавання на вашу сторінку!

Моя версія: Laravel Framework 5.7

Якщо ви хочете додати зовнішній .jsфайл ..

1. Скопіюйте свої зовнішні коди.
2. Запустіть команду npm installу своєму терміналі.
3. Після виконання наведеної вище команди ви побачите папку з іменем node_modules.
4. Потім перейдіть до ресурсів / js .
5. Відкрити файл app.js.
6. Прокрутіть униз і вставте зовнішній JS.
7. Нарешті запустіть команду npm run devу своєму терміналі.

ваші скрипти будуть оновлені, їх компіляція та переміщення до public/js/app.js. додавання .jsфайлу в загальну папку не вплине на вашу сторінку.

Якщо ви хочете додати зовнішній .cssфайл ..

1. Скопіюйте свої зовнішні стилі.
2. Запустіть команду npm installу своєму терміналі.
3. Після виконання наведеної вище команди ви побачите папку з іменем node_modules.
4. Потім перейдіть до ресурсів / sass .
5. Відкрити файл app.scss.
6. Прокрутіть униз і вставте зовнішні стилі.
7. Нарешті запустіть команду npm run devу своєму терміналі.

ваші скрипти будуть оновлені, їх компіляція та переміщення до public/css/app.css. додавання .cssфайлу в загальну папку не вплине на вашу сторінку.

• Найпростіший і найбезпечніший спосіб додати свої зовнішні .css та .js.

Підмостки JavaScript та CSS Laravel

Компіляція об’єктів YouTube

Можливо, я спізнююсь на вечірку, але включити JS та CSS способом Laravel просто, просто використовуючи функцію activ ()

напр <link rel="stylesheet" href="{{ asset('css/app.css') }}" />

Сподіваюся, що це допомагає

Я використовую

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

Є багато способів включити зовнішні файли css та js, як зазначено в коді нижче, але ви можете вибрати один із них, я перевірив їх усі, вони працюють однаково.

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

Можливо, є більше способів його завантажити.

але майте на увазі, що якщо ви завантажуєте css та js з іншої, ніж загальної папки, тоді краще використовувати Laravel mix.