Используете CSS в представлениях Laravel?

109

Я только начал изучать Laravel и могу освоить основы контроллера и маршрутизации.

Моя ОС - Mac OS X Lion, и она находится на сервере MAMP.

Мой код из routes.php:

Route::get('/', function() {
    return View::make('home.index');
});

Route::get('businesses', function() {
    return View::make('businesses.index');
});

Route::get('testing', function() {
    return View::make('testing.index');
});        

Route::get('hello', function() {
    return "<h3>Hello world!</H3>";
});

Это работает, представления отображаются отлично, «однако» то, что я хочу попробовать, это включить CSS в представления, я попытался добавить ссылку на таблицу стилей в каталоге, но страница отображала его как шрифт браузера по умолчанию даже хотя CSS был в HTML!

Это index.php от предприятий в папке просмотров:

<head>
   <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<p>Business is a varied term. My content here.

Я попытался использовать механизм шаблонов Blade в своей другой папке представлений (тестирование) для отображения CSS, но снова CSS не отображался, несмотря на то, что он находился в папке тестирования!

Как мне преодолеть эту проблему и поправиться - поскольку я медленно изучаю этот фреймворк.

php frameworks laravel avenas8808
источник

Какую версию Laravel вы вообще используете?

Black

5

{{ URL::asset('css/css.css') }}

vishalknishad

157

Поместите свои активы в общую папку

public/css
public/images
public/fonts
public/js

И они назвали это с помощью Laravel

{{ HTML::script('js/scrollTo.js'); }}

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

Фернандо Монтойя
источник

2

Не вызывайте CSS внутри @section или чего-то еще, если вы используете blade, у меня сработало!

star18bit

3

Чтобы этот синтаксис работал, вы должны использовать лезвие. Если вы не используете Blade, вам придется использовать: <? Php echo HTML :: style ('css / common.css');?>

Николас Крейдберг

6

Теперь все по-другому для Laravel 5.0, где пакет lighting / html больше не включен по умолчанию laracasts.com/series/laravel-5-fundamentals/episodes/10 для подробностей

dangel

1

Если это не сработает для вас, вот что сработало для меня: stackoverflow.com/questions/15232600/…

Дэн Клос

1

У меня тоже не работает. Неустранимая ошибка: класс «HTML» не найден

geoidesic 08

56

Поместите свои активы в общую папку

public/css
public/images
public/fonts
public/js

И затем вызвал его с помощью Laravel

{{ URL::asset('js/scrollTo.js'); }} // Generates the path to public directory public/js/scrollTo.js

{{ URL::asset('css/css.css'); }}   // Generates the  path to public directory public/css/css.css

(ИЛИ)

{{ HTML::script('js/scrollTo.js'); }} // Generates the  path to public directory public/js/scrollTo.js

{{ HTML::style('css/css.css'); }} // Generates the path to public directory public/css/css.css

Ведущий разработчик
источник

URL :: asset () встроен, тогда как HTML :: style () требует пакета

omarjebari

Не могли бы вы добавить к своему ответу, где следует вызывать этот код {{ URL::asset('js/scrollTo.js'); }}? можешь привести пример?

Ramesh Pareek

43

ваш файл css находится в общей папке или в ее подпапке.

fe, если вы вставите свой css

public/css/common.css

вы бы использовали

HTML::style('css/common.css');

В вашем взгляде на лезвие ...

Или вы также можете использовать класс Asset http://laravel.com/docs/views/assets ...

Андре Келлер
источник

Нет, это не имеет значения. Я не могу получить доступ ни к чему через браузер, содержащийся в этих каталогах ...

dcolumbus

@dcolumbus Если полученное вами сообщение 404 создано Laravel (т.е. не сервером по умолчанию), то в вашем .htaccess может отсутствовать следующая строка (при условии, что вы используете Apache): "RewriteCond% {REQUEST_FILENAME}! -f ". Эта строка должна располагаться над строкой с index.php в ней и предотвращать запросы к путям, которые существуют в файловой системе, от обработки системой маршрутизации Laravel. Если полученный 404 не сгенерирован Laravel, вам нужно добавить «AllowOverride All» в конфигурацию Apache, чтобы обработать .htaccess (дополнительную информацию см. В документации Apache).

tjbp

Он сказал, что хочет поместить файлы css в папку просмотра, а не в общую папку, asset () и HTML :: style / HTML :: script все указывает на общедоступный каталог, laravel не позволяет ничему внутри папки приложения быть доступ посторонних лиц в целях безопасности. Так что даже если есть index.php или нет, неважно, чего он хочет.

Bryan P

26

Вы также можете написать простой тег ссылки, как обычно, а затем использовать href attr:

<link rel="stylesheet" href="<?php echo asset('css/common.css')?>" type="text/css">

конечно, вам нужно поместить свой файл css в public / css

Диего Кастаньо
источник

@dcolumbus 404, возможно, из-за неправильного пути, попробуйте добавить префикс / public /, по умолчанию laravel имеет префикс / public / /public/css/common.css

Дэвид Валентино

23

Сделать это можно следующим образом.

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

{{ HTML::style('css/style.css', array('media' => 'print')) }}

Он выполнит поиск файла стиля в общей папке Laravel, а затем отобразит его.

Ахмад Шариф
источник

1

Круто Ахмад, он будет работать нормально, если вы http свяжете таблицу стилей поверх <link href = "{{{asset ('/ css / style.css')}}}" rel = "stylesheet">, но если вы используете, httpsто запрос будет заблокирован, и возникнет ошибка смешанного содержимого, чтобы использовать его через https, вы должны использовать, secure_assetнапример, <link href = "{{{secure_asset ('/ css / style.css')}}}" rel = "stylesheet" > laravel.com/docs/5.1/helpers#method-secure-asset

Sambhav Pandey

Нужны только 2 скобки, а не 3.

Олег Абражаев

Если вы используете это решение для laravel 5, вам необходимо установить LaravelCollective Forms & HTML provider. См. Инструкции : laravelcollective.com/docs/5.4/html . Не забудьте запустить "composer update" после обновления composer.json.

Азимов

15

Как упоминал Ахмад Шариф, вы можете связать таблицу стилей через http

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

но если вы используете, httpsто запрос будет заблокирован, и появится ошибка смешанного содержимого, чтобы использовать его через https, secure_assetнапример

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

https://laravel.com/docs/5.1/helpers#method-secure-asset

Самбхав Панди
источник

2

Требуются

Куда я помещаю свои файлы css, js? либо на, public/cssлибоresources/assets/css

NaveenDA

10

Начиная с Laravel 5, HTMLкласс больше не включен по умолчанию.

Если вы используете помощники формы или HTML, вы увидите ошибку, в которой указано, что класс «Форма» не найден или класс «Html» не найден. Помощники Form и HTML устарели в Laravel 5.0; однако есть замены, инициированные сообществом, такие как поддерживаемые Laravel Collective.

Вы можете использовать следующую строку для включения ваших файлов CSS или JS:

<link href="{{ URL::asset('css/base.css') }}" rel="stylesheet">
<link href="{{ URL::asset('js/project.js') }}" rel="script">

Боно
источник

2

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

Азимов

7

Обновление для laravel 5.4 ----

Во всех ответах использовался класс HTML для laravel, но я предполагаю, что теперь он обесценился в laravel 5.4, поэтому поместите свои файлы css и js в public-> css / js и ссылайтесь на них в своем html, используя

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

Эминем347
источник

Это хорошо работает в Laravel <link href = "css / common.css" rel = "stylesheet"> css.common.css не требуется

Удхав Сарвайя

5

Это невозможно, братан, Laravel предполагает, что все находится в общей папке.

Итак, мое предложение:

Перейти в общую папку.
Создайте папку, желательно с именем css .
Создайте папку для соответствующих представлений, чтобы упорядочить вещи.
Поместите соответствующий CSS в эти папки, так вам будет проще.

Или

Если вы действительно настаиваете на том, чтобы поместить css в папку просмотров, вы можете попробовать создать Symlink (вы Mac, так что все в порядке, но для Windows это будет работать только для Vista, Server 2008 или выше) из каталога вашей папки css в общедоступный папку, и вы можете использовать {{HTML::style('your_view_folder/myStyle.css')}}внутри своих файлов просмотра, вот код для вашего удобства, в опубликованном вами коде поместите их перед return View::make():

$css_file = 'myStyle.css';
$folder_name = 'your_view_folder';
$view_path = app_path() . '/views/' . $folder_name . '/' . $css_file;
$public_css_path = public_path() . '/' . $folder_name;
if(file_exists($public_css_path)) exec('rm -rf ' . $public_css_path);
exec('mkdir ' . $public_css_path);
exec('ln -s ' . $view_path .' ' . $public_css_path . '/' . $css_file);

Если вы действительно хотите попробовать реализовать свою идею, попробуйте следующее:

<link rel="stylesheet" href="<?php echo app_path() . 'views/your_view_folder/myStyle.css'?>" type="text/css">

Но это не сработает, даже если каталог файлов правильный, потому что Laravel не будет этого делать в целях безопасности, Laravel очень вас любит.

Брайан П.
источник

5

На мой взгляд, лучший вариант перехода к css и js - использовать следующий код:

<link rel="stylesheet" type="text/css" href="{{ URL::to('route/to/css') }}">

Итак, если у вас есть файл css с именем main.css внутри папки css в общей папке, он должен быть следующим:

<link rel="stylesheet" type="text/css" href="{{ URL::to('css/main.css') }}">

kqcreations
источник

4

поместите ваш файл css в общую папку. (public / css / bootstrap-responseive.css) и<link href="./css/bootstrap-responsive.css" rel="stylesheet">

Huuthang
источник

Круто, работает! Но есть ли разница между <link href="./css/bootstrap-responsive.css" rel="stylesheet">и<link href="{{ url('/') }}./css/bootstrap-responsive.css" rel="stylesheet">

Грегорди

4

Вы можете просто разместить все файлы в указанной папке публично, например

public / css
public / js
public / images

Затем просто вызовите файлы, как в обычном html, например
<link href="css/file.css" rel="stylesheet" type="text/css">

Он отлично работает в любой версии Laravel.

Suzan
источник

3

Скопируйте файл css или js, который вы хотите включить, в общую папку или вы можете сохранить их в папках public / css или public / js.

Например. вы используете файл style.css из папки css в общедоступном каталоге, тогда вы можете использовать

<link rel="stylesheet" href="{{ url() }}./css/style.css" type="text/css"/>

Но в Laravel 5.2 вам придется использовать

<link rel="stylesheet" href="{{ url('/') }}./css/style.css" type="text/css"/>

и если вы хотите включить файлы javascript из папки public / js, это тоже довольно просто

<script src="{{ url() }}./js/jquery.min.js"></script>

и в Laravel 5.2 вам нужно будет использовать

<script src="{{ url('/') }}./js/jquery.min.js"></script>

эта функция url()является вспомогательной функцией laravel, которая генерирует полный URL-адрес для заданного пути.

Акшай Хале
источник

3

поместите свой css в общую папку, затем

добавьте это в свой файл лезвия

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

Saengdaet
источник

3

Используйте {!! в новом ларавеле

{!! asset('js/app.min.js') !!}

<script type="text/javascript" src="{!! asset('js/app.min.js') !!}"></script>

ТАРУН ШАРМА
источник

2

Для Laravel 5.4 и если вы используете помощник смешивания, используйте

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

GSUB
источник

2

Поместите их в publicпапку и назовите в представлении примерно так href="{{ asset('public/css/style.css') }}". Обратите внимание, что publicпри вызове assets.

Абайдж
источник

Не нужно указывать «общедоступную» папку. Например, у меня это сработало. <link href = "{{asset ('css / bootstrap.min.css')}}" rel = "stylesheet">. Ваш пример не сработал.

Isuru

2

Для тех, кому по каким-либо причинам необходимо хранить js / css вне общей папки, в современном Laravel вы можете использовать под-представления . Скажите, что ваша структура просмотров

views
    view1.blade.php
    view1-css.blade.php
    view1-js1.blade.php
    view1-js2.blade.php

в view1дополнение

@include('view1-css')
@include('view1-js1')
@include('view1-js2')

в views-js.blade.phpфайлах оберните свой js-код в <script>тег

в views-css.blade.phpоберните свои стили в <style>тег

Это покажет Laravel и редактор кода, что те на самом деле jsи cssфайлов. Вы можете сделать то же самое с дополнительными HTML, SVG и другими материалами, которые можно отображать в браузере.

Артур Тарасов
источник

Используете CSS в представлениях Laravel?

Ответы: