Как подключить стили в laravel

Подключение CSS файлов к проекту на Laravel с помощью Webpack

По аналогии с тем, как можно подключить один или несколько файл с JavaScript скриптами, точно также можно подключать и CSS файлы к проекту на Laravel с помощью Webpack. Это позволит поднять качество генерируемых странниц сайта в плане SEO за счёт уменьшения количества запросов к нескольким файлов со стилями. При подключении нескольких файлов с CSS стилями важно соблюдать порядок их подключения, так как нужно помнить, что любое свойство с одинаковым приоритетом в CSS перепрописывает предыдущее. Хотя вообще нужно стараться не дублировать свойства так, чтобы они перепрописывали друга дружку, но обычно на больших проектах за такими «пустяками» сложно уследить, находя нужное свойство в каком-то отдельном файле. Всегда проще перепрописать (что не правильно, но реально проще, если в проекте есть масса модулей от разных разработчиков, которые используют свои собственные стили).

Node.js и NPM

Итак, для того, чтобы собирать все CSS файлы в один общий файл (или несколько отдельных для разных типов страниц), нужно иметь доступ к командной строки на сервере, и что на сервере установлены Node.js и NPM. Для того, чтобы проверить, установлен ли Node.js можно воспользоваться командой:

, которая выведет версию установленной Node.js. И командой:

, которая выведет версию пакета NPM, установленного на сервере.

Если при этих запросах (или хотя бы в одном) выдаётся ошибка о том, что данная команда не найдена, это значит, что скорее всего эти пакеты не установлены на сервере и их нужно установить.

Подготовка файлов со стилями CSS к переносу в проект

webpack.mix.js — файл для указания того, что будет входить в сборку CSS свойств элементов страниц проекта на Laravel

После того, как файл со стилями CSS подготовлен, его требуется перенести в папку public проекта, которая служит корневой папкой для сайта.

Для подключения одного файла CSS к проекту нужно в этом файле webpack.mix.js прописать команду:

Сборка файла с CSS стилями для публикации на сайте Laravel

Для того, чтобы перенести файл с нашими CSS стилями в папку проекта, нужно выполнить в консоли сервера из корня проекта команду:

Для сборки в режиме «продакшен» (без лишних символов в одну строку), используйте команду:

В результате получим отчёт:

Компиляция нескольких файлов со CSS стилями в проект Laravel

Для компиляции нескольких файлов со CSS стилями в проект Laravel в файле webpack.mix.js в качестве первого аргумента можно передавать массив с именами файлов, которые требуется подключить в проект, например:

Подключение скомпилированного файла с CSS стилями к проекту Laravel

Всё, что осталось сделать, это в шаблон сайта вписать подключение скомпилированного файла с CSS стилями (или нескольких файлов в зависимости от функционала страниц проекта).

Это делается в пределах контейнера :

После этого все подключенные CSS стили должны начать работать после перезагрузки страницы проекта.

Источник

Подключение CSS файлов к проекту на Laravel с помощью Webpack

По аналогии с тем, как можно подключить один или несколько файл с JavaScript скриптами, точно также можно подключать и CSS файлы к проекту на Laravel с помощью Webpack. Это позволит поднять качество генерируемых странниц сайта в плане SEO за счёт уменьшения количества запросов к нескольким файлов со стилями. При подключении нескольких файлов с CSS стилями важно соблюдать порядок их подключения, так как нужно помнить, что любое свойство с одинаковым приоритетом в CSS перепрописывает предыдущее. Хотя вообще нужно стараться не дублировать свойства так, чтобы они перепрописывали друга дружку, но обычно на больших проектах за такими «пустяками» сложно уследить, находя нужное свойство в каком-то отдельном файле. Всегда проще перепрописать (что не правильно, но реально проще, если в проекте есть масса модулей от разных разработчиков, которые используют свои собственные стили).

Node.js и NPM

Итак, для того, чтобы собирать все CSS файлы в один общий файл (или несколько отдельных для разных типов страниц), нужно иметь доступ к командной строки на сервере, и что на сервере установлены Node.js и NPM. Для того, чтобы проверить, установлен ли Node.js можно воспользоваться командой:

, которая выведет версию установленной Node.js. И командой:

, которая выведет версию пакета NPM, установленного на сервере.

Если при этих запросах (или хотя бы в одном) выдаётся ошибка о том, что данная команда не найдена, это значит, что скорее всего эти пакеты не установлены на сервере и их нужно установить.

Подготовка файлов со стилями CSS к переносу в проект

webpack.mix.js — файл для указания того, что будет входить в сборку CSS свойств элементов страниц проекта на Laravel

После того, как файл со стилями CSS подготовлен, его требуется перенести в папку public проекта, которая служит корневой папкой для сайта.

Для подключения одного файла CSS к проекту нужно в этом файле webpack.mix.js прописать команду:

Сборка файла с CSS стилями для публикации на сайте Laravel

Для того, чтобы перенести файл с нашими CSS стилями в папку проекта, нужно выполнить в консоли сервера из корня проекта команду:

Для сборки в режиме «продакшен» (без лишних символов в одну строку), используйте команду:

В результате получим отчёт:

Компиляция нескольких файлов со CSS стилями в проект Laravel

Для компиляции нескольких файлов со CSS стилями в проект Laravel в файле webpack.mix.js в качестве первого аргумента можно передавать массив с именами файлов, которые требуется подключить в проект, например:

Подключение скомпилированного файла с CSS стилями к проекту Laravel

Всё, что осталось сделать, это в шаблон сайта вписать подключение скомпилированного файла с CSS стилями (или нескольких файлов в зависимости от функционала страниц проекта).

Это делается в пределах контейнера :

После этого все подключенные CSS стили должны начать работать после перезагрузки страницы проекта.

Источник

Laravel Framework Russian Community

Пролог

Начало работы

Архитектурные концепции

Основное

Погружение

Безопасность

База данных

Eloquent ORM

Тестирование

Пакеты

Компиляция JS и CSS (Mix)

Введение

Laravel Mix – это пакет, разработанный создателем Laracasts Джеффри Уэй, предлагает гибкий API для определения шагов сборки Webpack для вашего приложения с использованием нескольких распространенных препроцессоров CSS и JavaScript.

Другими словами, Mix упрощает компиляцию и минимизацию файлов CSS и JavaScript вашего приложения. Посредством простой цепочки методов вы можете гибко определять свой сценарий по сборки исходников. Например:

Если вы однажды были сбиты с толку и ошеломлены, начав работу с Webpack и компиляцией ресурсов, то вам понравится Laravel Mix. Однако от вас не требуется использовать его при разработке приложения; вы можете использовать любой желаемый инструмент сборки, или даже не использовать его вовсе. Справедливо и обратное: вы можете использовать Laravel Mix без привязки вашего приложения к фреймворку Laravel.

Если вам нужно начать разработку приложения с помощью Laravel и Tailwind CSS, ознакомьтесь с одним из наших стартовых комплектов приложения.

Установка и настройка

Установка Node

Перед запуском Mix вы должны сначала убедиться, что на вашем компьютере установлены Node.js и NPM:

Вы можете легко установить последнюю версию Node и NPM с помощью простых графических установщиков с официального веб-сайта Node. Или, если вы используете Laravel Sail, вы можете вызывать Node и NPM через Sail:

Установка Laravel Mix

Запуск Mix

Наблюдение за изменениями исходников

Команда npm run watch продолжит работу в консоли и будет следить за изменениями во всех соответствующих файлах CSS и JavaScript. Webpack автоматически перекомпилирует ваши исходники, когда обнаружит изменение в одном из этих файлов:

Webpack может не обнаруживать изменения ваших файлов в определенных локальных средах разработки. Если это наблюдается в вашей системе, рассмотрите возможность использования команды watch-poll :

Работа с таблицами стилей

Файл webpack.mix.js вашего приложения является отправной точкой для компиляции всех ресурсов. Думайте об этом как о легкой конфигурационной обертке вокруг Webpack. Задачи Mix могут быть объединены в цепочку, чтобы точно определить, как должны компилироваться ваши ресурсы.

Tailwind CSS

Tailwind CSS – это современный, низкоутилитарный фреймворк для создания удивительных сайтов, не покидая HTML-разметку. Давайте рассмотрим, как начать использовать его в проекте Laravel совместно с Mix. Во-первых, мы должны установить Tailwind с помощью NPM и сгенерировать наш конфигурационный файл Tailwind:

Затем вы должны добавить каждый из «слоев» Tailwind в файл resources/css/app.css вашего приложения:

После того, как вы указали необходимые слои Tailwind, необходимо обновить файл webpack.mix.js вашего приложения, чтобы скомпилировать ваш CSS, использующий Tailwind:

PostCSS

PostCSS – мощный инструмент для преобразования вашего CSS, включен в Laravel Mix из коробки. По умолчанию Mix использует популярный плагин Autoprefixer для автоматического применения всех необходимых префиксов CSS3. Однако вы можете добавлять любые дополнительные плагины, подходящие для вашего приложения.

Сначала установите нужный плагин через NPM и включите его в свой массив плагинов при вызове метода postCss Mix. Метод postCss принимает путь к вашему файлу CSS в качестве первого аргумента, а в качестве второго аргумента – каталог, в который следует поместить скомпилированный файл:

Или вы можете выполнить postCss без дополнительных плагинов, чтобы получить простую компиляцию и минификацию CSS:

Метод sass позволяет вам скомпилировать Sass в CSS, понятный веб-браузерам. Метод sass принимает путь к вашему файлу Sass в качестве своего первого аргумента и каталог, в который должен быть помещен скомпилированный файл, в качестве второго аргумента:

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

Обработка URL

Поскольку Laravel Mix построен поверх Webpack, важно понимать несколько концепций Webpack. Для компиляции CSS Webpack перезапишет и оптимизирует любые вызовы url() в ваших таблицах стилей. Хотя поначалу это может показаться странным, это невероятно мощная функциональность. Представьте, что мы хотим скомпилировать Sass, который включает относительный URL-адрес изображения:

Абсолютные пути для любого заданного url() будут исключены из перезаписи URL. Например, url(‘/images/thing.png’) или url(‘http://example.com/images/thing.png’) не будут изменены.

Какой бы полезной ни была эта функция, возможно, что ваша существующая структура папок уже настроена так, как вам нравится. В этом случае вы можете отключить перезапись url() следующим образом:

Source maps CSS

Сопоставление стилей исходников

Работа с JavaScript

Mix содержит несколько функций, которые помогут вам работать с вашими файлами JavaScript, например, компиляция современного ECMAScript, объединение модулей, минификация и объединение простых файлов JavaScript. Более того, все это работает без проблем, не требуя ни унции специального конфигурирования:

Теперь, с помощью одной строчки кода вы можете воспользоваться следующими преимуществами:

После того как ваш JavaScript скомпилирован, вы можете ссылаться на него в своем приложении:

React

Mix автоматически установит плагины Babel, необходимые для поддержки React. Для начала добавьте вызов метода react :

За кулисами Mix загрузит и включит соответствующий плагин babel-preset-react Babel. После того как ваш JavaScript скомпилирован, вы можете ссылаться на него в своем приложении:

Извлечение сторонних библиотек

Одним из потенциальных недостатков объединения всего кода JavaScript для конкретного приложения со сторонними библиотеками, такими как React и Vue, является то, что это затрудняет долгосрочное кеширование. Например, одно обновление кода вашего приложения заставит браузер повторно загрузить все сторонние библиотеки, даже если они не изменились.

Чтобы избежать ошибок JavaScript, обязательно загружайте эти файлы в правильном порядке:

Пользовательская конфигурация Webpack

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

Версионирование / очистка кеша

Метод version добавит уникальный хеш к именам файлов всех скомпилированных исходников, что сделает очистку кеша более удобной:

После создания файла версионирования вы не узнаете его точное имя. Итак, вы должны использовать глобальную функцию Laravel mix в вашем шаблоне для загрузки хешированного ресурса. Глобальная функция mix фреймворка Laravel автоматически определит текущее имя хешированного файла:

Поскольку файлы с поддержкой версий обычно нужны только в эксплуатационном окружении, вы можете указать, чтобы процесс управления версиями выполнялся только во время запуска npm run prod :

Корректировка базовых URL-адресов с помощью Mix

После указания URL-адреса, функция mix будет подставлять указанный префикс при создании URL-адресов для ресурсов:

Обновление контента с помощью Browsersync

BrowserSync может автоматически отслеживать изменения в ваших файлах и вносить изменения в браузер, не требуя обновления страницы вручную. Вы можете включить эту поддержку, вызвав метод mix.browserSync() :

Параметры BrowserSync можно указать путем передачи объекта JavaScript в метод browserSync :

Переменные окружения

Уведомления

Когда доступно, Mix будет автоматически отображать уведомления ОС при компиляции, давая вам мгновенную информацию о том, была ли компиляция успешной или нет. Однако, могут быть случаи, когда вы предпочтете отключить эти уведомления. Одним из таких примеров может быть запуск Mix на вашем рабочем сервере. Уведомления можно отключить с помощью метода disableNotifications :

Источник

Laravel по-русски

Русское сообщество разработки на PHP-фреймворке Laravel.

#1 24.06.2015 21:59:58

Подключение стилей

Доброго времени суток!
С фреймворком начал разбираться позавчера.

Пытаюсь подключить css следующим образом:

Выдает ошибку «Class ‘HTML’ not found».
Пытался исправить это по инструкции,
ничего не получилось, возможно, что-то сделал не так.

Кто бы мог подсказать, что можно сделать?

Не в сети 23.06.2015

#2 24.06.2015 22:18:29

Re: Подключение стилей

Полистал форум, реализовал вот так:

Тогда вопрос, как именно принято подключать стили, скрипты и т. п. в laravel?

Не в сети 23.06.2015

#3 25.06.2015 12:06:40

Re: Подключение стилей

Не в сети 23.11.2014

#4 25.06.2015 15:50:23

Re: Подключение стилей

Сам недавно начал изучать фреймворк, и для того чтобы вставить такой код << HTML::style('assets/css/test.css') >> нужно подключить хелпер HTML:
Установка хелперов html и form
в composer.json в раздел require вставляем:
«laravelcollective/html»: «

5.0″
После чего в консоли пишем php composer.phar update

После этого в config/app.php в разделе providers дописываем Collective\Html\HtmlServiceProvider::class
И в разделе aliases прописываем
‘Form’ => Collective\Html\FormFacade::class,
‘Html’ => Collective\Html\HtmlFacade::class,

Не в сети 25.06.2015

#5 25.06.2015 15:51:54

Re: Подключение стилей

Не в сети 25.06.2015

#6 25.06.2015 16:05:30

Re: Подключение стилей

Не в сети 27.01.2015

#7 24.03.2016 18:56:06

Re: Подключение стилей

Изменено Nifler (24.03.2016 19:00:16)

Не в сети 12.03.2016

#8 24.03.2016 20:41:04

Re: Подключение стилей

Поместить скрипты и стили в директорию «public»

Не в сети 12.02.2016

#9 25.03.2016 13:25:28

Re: Подключение стилей

Не в сети 12.03.2016

#10 25.03.2016 13:28:41

Re: Подключение стилей

все. понял. черт, тупил то как. public прописан как корень сайта, а я отталкивался от того что это папка в корне а не сам корень. все теперь работает.

Не в сети 12.03.2016

#11 05.10.2017 17:25:26

Re: Подключение стилей

Доброго времени суток, уважаемые форумчане!
Только начал свое знакомство с Laravel, помогите решить проблему с подключением стилей:
OpenServer nginx 1.8
PHP 7.1

Для корректной работы роута в настройках сервера добавлено:

Собственно на этом этапе все сломалось:
Маршрутизация корректно за работала, а стили отлетели.

Я так понял, что это работа REST маршрутизатора, вопрос как его победить, чтобы и маршрутизация сохранилась и стили, скрипты, картинки подключались?

Изменено JohnnyVoodoo (05.10.2017 18:31:32)

Источник

Using CSS in Laravel views?

I’ve just began learning Laravel, and can do the basics of a controller and routing.

My OS is Mac OS X Lion, and it’s on a MAMP server.

My code from routes.php:

That works, the views display perfectly, »however» what I want to try and do is include CSS within the views, I tried adding in a link to a stylesheet within the directory but the page displayed it as the default browser font even though the css was in the HTML!

This is index.php from businesses within the views folder:

I tried using the Blade template engine in my other views folder (testing) to display CSS but again the CSS did not show despite it being in the testing folder!

17 Answers 17

Put your assets in the public folder; e.g.:

And then, to access them using Laravel, use:

This syntax will automatically generate the correct path (e.g., `public/js/scrollTo.js’).

your css file belongs into the public folder or a subfolder of it.

f.e if you put your css in

In your blade view.

Or you could also use the Asset class http://laravel.com/docs/views/assets.

You can also write a simple link tag as you normaly would and then on the href attr use:

of course you need to put your css file under public/css

We can do this by the following way.

It will search the style file in the public folder of Laravel and then will render it.

Like Ahmad Sharif mentioned, you can link stylesheet over http

but if you are using https then the request will be blocked and a mixed content error will come, to use it over https use secure_asset like

Since Laravel 5 the HTML class is not included by default anymore.

If you’re using Form or HTML helpers, you will see an error stating class ‘Form’ not found or class ‘Html’ not found. The Form and HTML helpers have been deprecated in Laravel 5.0; however, there are community-driven replacements such as those maintained by the Laravel Collective.

You can make use of the following line to include your CSS or JS files:

All answers have have used the HTML class for laravel but I guess it has been depreciated now in laravel 5.4, so Put your css and js files in public->css/js And reference them in your html using

To my opinion the best option to route to css & js use the following code:

So if you have css file called main.css inside of css folder in public folder it should be the following:

You can simply put all the files in its specified folder in public like

public/css
public/js
public/images

Then just call the files as in normal html like

It works just fine in any version of Laravel

That is not possible bro, Laravel assumes everything is in public folder.

So my suggestion is:

If you really insist to put css inside of views folder, you could try creating Symlink (you’re mac so it’s ok, but for windows, this will only work for Vista, Server 2008 or greater) from your css folder directory to the public folder and you can use <> inside of your view files, here’s a code for your convenience, in the code you posted, put these before the return View::make() :

If you really want to try doing your idea, try this:

But it won’t work even if the file directory is correct because Laravel won’t do that for security purposes, Laravel loves you that much.

Источник