Таблицы стилей Laravel и JavaScript не загружаются для неосновных маршрутов

89

Хорошо. Я знаю, что это действительно элементарная проблема, но я не могу понять. Это вопрос о Ларавеле.

В принципе, у меня есть таблицы стилей, встроенные в мой макет по умолчанию. В настоящее время я использую обычный css для их ссылки, например:

<link rel="stylesheet" href="css/app.css" />

Он отлично работает, когда я на одном уровне, например , но перестает работать, когда я иду глубже, например /about/me.

Если я посмотрю на консоль разработчика Chrome, я вижу некоторые из следующих ошибок (только для более глубоких маршрутов):

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://example.dev/about/css/app.css".

Итак, теперь он ищет css внутри папки "about", что, конечно, не является папкой вообще.

Я просто хочу, чтобы он смотрел то же место для активов, независимо от маршрута.

Теги:
blade

16 ответов

145
Лучший ответ

Для Laravel 4 и 5:

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

URL::asset будет ссылаться на ваш project/public/ folder, так что добавьте свои скрипты туда.


Примечание: для этого вам нужно использовать " движок шаблонов ".Файлы Blade используют расширение .blade.php.
  • 8
    Просто подтверждение, что это работает и в Laravel 5 и 5.1 . Спасибо.
  • 1
    Я создал свой собственный пакет. могу ли я иметь CSS внутри? если так, как я могу включить CSS из моего собственного пакета?
Показать ещё 6 комментариев
54

Laravel 4

Лучший и правильный способ сделать это

Добавление CSS

HTML:: style будет ссылаться на ваш проект/публикацию/папку

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

Добавление JS

HTML:: script будет ссылаться на ваш проект/публикацию/папку

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

Вы используете относительные пути для своих активов, переходите к абсолютному пути и все будет работать (добавьте косую черту перед "css".

<link rel="stylesheet" href="/css/app.css" />
  • 0
    Это не будет работать, если ваше приложение находится в подкаталоге сайта. Затем вы сталкиваетесь с проблемой, когда вы смотрите слишком далеко назад для своих активов. Я рекомендую использовать предоставленное решение @Chris. Это устраняет ВСЕ догадки и позволяет вам перемещать ваше приложение куда угодно, и в то же время обеспечивает правильную загрузку ресурсов.
9

в Laravel 5,
есть два способа загрузить файл js в вашем представлении
сначала используется html-помощник, второй - с помощью помощников активов.
для использования html-помощника вы должны сначала установить этот пакет через командную строку:

composer require illuminate/html

тогда вам нужно его перезаписать, поэтому перейдите в config/app.php и добавьте эту строку в массив поставщиков

'Illuminate\Html\HtmlServiceProvider'

тогда вам нужно определить псевдонимы для вашего html-пакета, поэтому перейдите в aliases array в config/app.php и добавьте это

'Html'     => 'Illuminate\Html\HtmlFacade'

теперь ваш html-помощник установлен так, что в файлах просмотра вашего лезвия вы можете написать это:

{!! Html::script('js/test.js') !!}

это будет искать ваш файл test.js в файле project_root/public/js/test.js.
//////////////////////////////////////////////////////////////
для использования помощников ресурсов вместо html-помощника, вы должны написать sth, как это, в ваших файлах просмотра:

<script src="{{ URL::asset('test.js') }}"></script>

это будет искать файл test.js в project_root/resources/assets/test.js

  • 0
    осветить / HTML был заброшен. Вместо этого используйте laravelcollective / html.
  • 0
    Вы также можете использовать <script src="{{ url(asset('test.js')) }}"></script> (или <script src="{{ url(mix('test.js')) }}"></script> если вы используете Laravel Mix).
9

Я предполагаю, что вы используете Laravel 3, если да, разместите ваши файлы CSS/JS в общей папке, например

public/css
public/js

и назовите его с помощью шаблонов Blade

{{ HTML::style('css/style.css'); }}
{{ HTML::script('js/jquery-1.8.2.min.js'); }}
6

Я предлагаю вам поместить его в фильтр маршрута до {project}/application/routes.php

Route::filter('before', function()
{
    // Do stuff before every request to your application...    
    Asset::add('jquery', 'js/jquery-2.0.0.min.js');
    Asset::add('style', 'template/style.css');
    Asset::add('style2', 'css/style.css');

});

и используя механизм шаблонов лезвий

{{ Asset::styles() }}
{{ Asset::scripts(); }}

или более на laravel управлять документами по активам

  • 0
    да, этот новый laravel все усложняет, активы, даже профилировщик больше не находятся в документации ..
2

Laravel 5.4 с помощником смешивания:

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

У Винса почти все было правильно вы должны добавить

<base href="{{URL::asset('/')}}" target="_top">

и скрипты должны идти в своем обычном пути

<script src="js/jquery/jquery-1.11.1.min.js"></script>

причина этого в том, что изображения и другие вещи с относительным путем, например, с источником изображения или ajax-запросами, будут работать некорректно без привязки базового пути.

2

Лучший способ, по-моему, добавить тег BASE в ваш HTML

<base href="/" target="_top">

Так что не нужно использовать такие вещи, как

{{ HTML::script('js/jquery/jquery-1.11.1.min.js'); }}

просто введите

<script src="js/jquery/jquery-1.11.1.min.js"></script>

в вашем представлении, и он будет работать.

Этот mehod будет обрабатывать URL-адреса RESTful и статические ресурсы как изображения, css, скрипты.

2

в laravel 4 вам просто нужно вставить {{ URL::asset('/') }} следующим образом:

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

То же самое для:

  <script language="JavaScript" src="{{ URL::asset('/') }}js/jquery.js"></script>
  <img src="{{ URL::asset('/') }}img/image.gif">
1

Просто добавьте еще один вопрос:

Если вы хотите удалить /public из своего проекта, используя .htaccess,

то вы можете использовать это, [Добавить public до /css внутри asset()]

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

[Иногда это полезно.]

1

Предположим, вы не переименовали свою общую папку. Файлы css и js находятся в подкаталогах css и js в общей папке. Теперь ваш заголовок будет:

<link rel="stylesheet" type="text/css" href="/public/css/icon.css"/>
<script type="text/javascript" src="/public/js/jquery.easyui.min.js"></script>
1

Лучший способ использовать, например,

<link rel="stylesheet" href="{{asset('assets/libraries/css/app.css')}}">
1

Если вы делаете жесткий код, вам, вероятно, следует использовать полный путь (href="http://example.com/public/css/app.css"). Однако это означает, что вам придется вручную настроить URL-адреса для разработки и производства.

Альтернативой вышеупомянутым решениям было бы использовать <link rel="stylesheet" href="URL::to_asset('css/app.css')" /> в Laravel 3 или <link rel="stylesheet" href="URL::asset('css/app.css')" /> в Laravel 4. Это позволит вам написать свой HTML так, как вы этого хотите, но также позволить Laravel создать правильный путь для вы в любой среде.

0

В Laravel 5.7 поместите ваш файл CSS или JS в публичный каталог.

Для CSS:

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

Для JS:

<script type="text/javascript" src="{{ asset('bootstrap.js') }}"></script>
0

Для Laravel 4: {!! для двойной фигурной скобки {{
и для версии Laravel 5 и выше: вы можете заменить {!! {{и !!} by}} в старшей версии

Если вы поместили JavaScript в пользовательский каталог.
Например, если ваш jQuery-2.2.0.min.js находится в каталоге resources/views/admin/plugins/js/ то из *.blade.php вы сможете добавить в конце раздела как

<script src="{!! asset('resources/views/admin/plugins/js/jQuery-2.2.0.min.js') !!}"></script>

Так как версия Higher-End также поддерживает версию Low-End, но не наоборот

Ещё вопросы

Сообщество Overcoder
Наверх
Меню