Как включить внешний файл CSS и JS в Laravel 5

Я использую Laravel 5.0, Form и Html Helper удалены из этой версии, я не знаю, как включить внешние файлы 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 :: asset () создает для вас необходимый 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 и запустите composer update «lighting / 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 на

"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. Команда Run npm install в своем терминале.
3. Когда приведенная выше команда будет выполнена, вы увидите папку с именем node_modules .
4. Затем перейдите в resources / js .
5. Открыть файл app.js.
6. Прокрутите вниз и вставьте внешний JS.
7. Наконец, запустите команду npm run devв своем терминале.

ваши скрипты будут обновлены, и они будут скомпилированы и перемещены в public/js/app.js. добавление .jsфайла в общую папку не повлияет на вашу страницу.

Если вы хотите добавить внешний.css файл ..

1. Скопируйте ваши внешние стили.
2. Запустите командуnpm install в своем терминале.
3. Когда приведенная выше команда будет выполнена, вы увидите папку с именемnode_modules .
4. Затем перейдите в resources / sass .
5. Открыть файл app.scss.
6. Прокрутите вниз и вставьте свои внешние стили.
7. Наконец, запустите команду npm run devв своем терминале.

ваши скрипты будут обновлены, и они будут скомпилированы и перемещены в public/css/app.css. добавление .cssфайла в общую папку не повлияет на вашу страницу.

• Самый простой и безопасный способ добавить ваши внешние .css и .js.

Строительные леса Laravel JavaScript и CSS

Компиляция ресурсов YouTube

Я могу опоздать на вечеринку, но легко включить JS и CSS в Laravel Way, просто используя функцию asset ()

например <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 .