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

Laravel по-русски

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

• Форум
• » Laravel 6/7/8/9/10
• » Как подключить стили при переходе на Laravel 8?

Страницы 1

#1 19.12.2021 18:01:55

RsbAstana Сообщений: 12

Как подключить стили при переходе на Laravel 8?

Добрый день!
Перевожу свой проект Laravel с 7 на 8.
У меня в проекте на 7 были стили. Это файл public/css/app.css.
В новом проекте на Laravel 8 этого файла нет в структуре папок.
Зато есть resources/css/app.css. Сюда я и скопировал свои стили.

На 7-ке я подключал файл стилей:

>" rel="stylesheet">

На 8-ке установил Laravel Mix и подключаю:

>" rel="stylesheet">

В рез-те таблица стилей не подключена.
Предпросмотр таблицы показывает:

Содержимое файла webpack.mix.js:

mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css') .sourceMaps();

Файлы которые были сгенерированы в public/css удалил (там было не то, что нужно) , заново не генерируются.

Как подключить стили при переходе на Laravel 8?

Четыре способа быстрого добавления CSS на Laravel сайт

В этой статье мы покажем вам четыре способа включения файла CSS в проект Laravel, включая прямое подключение из каталога /public, URL CDN, использование Vite и Laravel Mix.

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

Метод 1: Загрузка CSS непосредственно из каталога /public

Этот метод следует использовать, если вы сами написали CSS или если это CSS стороннего производителя, который вы хотите разместить на своём сайте.

Чтобы загрузить файл CSS непосредственно из каталога /public в проекте Laravel, выполните следующие шаги:

1. Создайте или используйте существующую папку в директории /public и сохраните в ней свой файл CSS. Например, вы можете сохранить его как /public/css/styles.css
2. Добавьте следующий код в ваш шаблон blade в разделе head blade-файла вашей страницы:

link rel="stylesheet" href=">">

В качестве примера давайте сделаем карточку с тенью.

В приведённом ниже примере кода мы демонстрируем включение нашего CSS-файла в раздел . Мы также приводим содержимое самого файла CSS и маршрутизацию web.php , необходимую для его просмотра в веб-браузере.

resources/views/card.blade.php:

!DOCTYPE html> 
html lang="getLocale()) >>"> 
head> 
meta charset="utf-8"> 
meta name="viewport" content="width=device-width, initial-scale=1"> 
title>CSS example/title> 
link rel="stylesheet" href=">"> 
/head> 
body> 
section class="section"> 
div class="container"> 
div class="columns"> 
div class="column"> 
div class="card"> 
div class="header"> 
h1>1/h1> 
/div> 
div class="container"> 
p>April 30, 2023/p> 
/div> 
/div> 
/div> 
/div> 
/div> 
/section> 
/body> 
/html>

public/css/styles.css:

div.card  
width: 128px; 
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
text-align: center; 
> 
 
div.header  
background-color: #4CAF50; 
color: white; 
padding: 10px; 
font-size: 25px; 
> 
 
div.container  
padding: 10px; 
>

routes/web.php:

Route::get('/card', function ()  
return view('card'); 
>);

При загрузке страницы по адресу http://localhost/card вы должны увидеть, что стили применены правильно.

Метод 2: Загрузка CSS из CDN URL

В некоторых случаях CSS, который вы хотите использовать, уже размещён на URL сети доставки контента (CDN). Такой URL часто указывается в документации сторонних библиотек, например, Bootstrap.

Если вы загружаете файл CSS из CDN, а не передаёте его со своего сервера, это может ускорить время загрузки вашего приложения и снизить нагрузку на сервер.

Чтобы загрузить CSS с помощью CDN в Laravel, выполните следующие действия:

1. Найдите URL CDN, где размещён файл CSS, который вы хотите использовать.
2. Добавьте приведённый ниже код в файл шаблона blade вашего приложения Laravel:

link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">

Метод 3: Загрузка CSS из каталога /resources с помощью Vite (Laravel 9,10)

Используя Laravel 9 или 10, вы можете использовать Vite, инструмент командной строки для создания CSS и JS ресурсов из файлов в папке /resources . Полученный файл(ы) будет автоматически сохранён в папку /public .

Чтобы создать CSS с помощью Vite, выполните следующие шаги:

1. Создайте или используйте существующую папку в каталоге /resources и сохраните в ней свой CSS-файл. Например, вы можете сохранить его как /resources/css/styles.css
2. Создайте или отредактируйте файл vite.config.js в корневой папке Laravel и добавьте следующий код:

import  defineConfig > from 'vite'; 
import laravel from 'laravel-vite-plugin'; 
 
export default defineConfig( 
plugins: [ 
laravel( 
input: ['resources/css/styles.css'], 
refresh: true, 
>), 
], 
>);

npm run build

@vite(['resources/css/styles.css'])

Метод 4: Загрузка CSS из каталога /resources с помощью Laravel Mix (Laravel 5,6,7,8)

Laravel Mix — мощный инструмент командной строки, который позволяет компилировать CSS (и JS) ресурсы из файлов в каталоге /resources и сохранять их в /public аналогично тому, как это делает Vite. Обратите внимание, что сборка файлов с помощью Laravel Mix работает немного медленнее, чем Vite.

Чтобы создать CSS с помощью Laravel Mix, выполните следующие шаги:

1. Создайте новую папку в каталоге /resources . Назовите её, например, css
2. Сохраните файл CSS в созданной директории. Например, вы можете сохранить его как styles.css
3. Создайте или отредактируйте файл webpack.config.js в корневой директории Laravel. В этом файле вы можете задать расположение файла CSS: webpack.config.js:

const mix = require('laravel-mix'); 
mix.css('resources/css/styles.css', 'public/css');

npm run prod

link href=">" rel="stylesheet">

Команда Laravel постепенно отказывается от использования Laravel Mix в пользу Vite, начиная с Laravel 9 и более поздних версий. Он включён по умолчанию в Laravel 5, 6, 7 и 8, но не включён в Laravel 9, 10 и более поздние версии. Если вы предпочитаете использовать Laravel Mix, вы все равно можете установить его вручную.

Чтобы установить Laravel Mix на Laravel 9 или более позднюю версию, вам сначала нужно изменить ваш package.json на тот, который был в Laravel 8:

package.json:

 
"private": true, 
"scripts":  
"dev": "npm run development", 
"development": "mix", 
"watch": "mix watch", 
"watch-poll": "mix watch -- --watch-options-poll=1000", 
"hot": "mix watch --hot", 
"prod": "npm run production", 
"production": "mix --production" 
>, 
"devDependencies":  
"axios": "^0.21", 
"laravel-mix": "^6.0.6", 
"lodash": "^4.17.19", 
"postcss": "^8.1.14" 
> 
>

В противном случае команды npm не найдут mix. После этого вы можете установить Laravel Mix, выполнив следующие действия:

npm install laravel-mix

Заключение

В этой статье мы рассмотрели различные методы включения CSS в проект Laravel. Каждый метод имеет свои преимущества и недостатки, и вы можете выбрать тот, который соответствует требованиям вашего проекта. Загрузка CSS непосредственно из общей папки — самый простой подход. Использование CDN URL-адреса также довольно просто и может помочь ускорить время загрузки приложения и снизить нагрузку на сервер. Наконец, использование Vite или Laravel Mix для создания ваших ресурсов поможет применить минификацию кода для ускорения загрузки страниц, позволит использовать SASS и LESS, а также обычный CSS, и легко объединить несколько CSS-файлов в один.

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

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

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

Node.js и NPM

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

node -v

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

npm -v

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

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

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

Для того, чтобы не создавать хаос у себя на сервере, все файлы, относящиеся к проекту лучше хранить в папке /resources , которая уже создана при установке Laravel. В эту папку вложена папка css , в которую и нужно складывать все файлы со стилями CSS, которые нужны для работы с проектом. Если эти файлы нужно разделить на группы, можно сделать вложенные папки. Полный путь до папки со стилями CSS относительно корня папок проекта будет:

/resources/css

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

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

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

Для этого нужно отредактировать файл webpack.mix.js , который находится в корневой директории проекта.

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

mix.styles('resources/css/app.css', 'public/css/moonbase.css')

• resources/css/app.css — это файл, который требуется подключить к проекту (с полным путём к нему)
• public/css/moonbase.css — это файл, куда требуется перенести данный файл (с указанием пути, куда переносим и названием файла, куда будут складываться все стили CSS)

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

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

npm run dev

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

npm run production

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

 DONE Compiled successfully in 86ms 9:08:19 PM Asset Size Chunks Chunk Names /css/moonbase.css 29 bytes [emitted]

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

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

mix.styles([ 'resources/css/file1.css', 'resources/css/file2.css', 'resources/css/file3.css' ], 'public/css/all.css');

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

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

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

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

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! 😉

CSS Preprocessors

A single method call allows you to compile your Sass, Less, or Stylus files, while applying automatic CSS3 prefixing.

Though webpack can inline all of your CSS directly into the bundled JavaScript, Laravel Mix automatically performs the necessary steps to extract it to your desired output path.

Multiple Builds

Should you need to compile more than one root file, you may call mix.sass() (or any of the preprocessor variants) as many as times as is needed. For each call, webpack will output a new file with the relevant contents.

mix.sass('src/app.scss', 'dist/') // creates 'dist/app.css' .sass('src/forum.scss', 'dist/'); // creates 'dist/forum.css' 

Example

Let’s review a quick example:

webpack.mix.js

let mix = require('laravel-mix'); mix.sass('resources/assets/sass/app.sass', 'public/css'); 

./resources/assets/sass/app.sass

$primary: grey .app background: $primary 

For Sass compilation, you may freely use the .sass and .scss syntax styles.

Compile this down as usual ( npm run webpack ), and you’ll find a ./public/css/app.css file that contains:

Plugin Options

Behind the scenes, Laravel Mix of course defers to Node-Sass, Less, and Stylus to compile your Sass and Less files, respectively.
From time to time, you may need to override the default options that we pass to them. You may provide these as the third argument to mix.sass() , mix.less() , and mix.stylus() .

• Node-Sass Options:https://github.com/sass/node-sass#options
• Less Options:https://github.com/webpack-contrib/less-loader#options

mix.sass('src', 'destination', < outputStyle: 'nested' >); 

Stylus Plugins

If using Stylus, you may wish to install extra plugins, such as Rupture.
No problem. Simply install the plugin in question through NPM ( npm install rupture ), and then require it in your mix.stylus() call, like so:

mix.stylus('resources/assets/stylus/app.styl', 'public/css', < use: [ require('rupture')() ] >); 

Should you wish to take it further, and automatically import plugins globally, you may use the import option. Here’s an example:

mix.stylus('resources/assets/stylus/app.styl', 'public/css', < use: [ require('rupture')(), require('nib')(), require('jeet')() ], import: [ '~nib/index.styl', '~jeet/jeet.styl' ] >); 

That’s all there is to it!

CSS url() Rewriting

One key webpack concept to understand is that it will rewrite any url() s within your stylesheets. While this might initially sound strange, it’s an incredibly powerful piece of functionality.

An Example

Imagine that we want to compile a bit of Sass that includes a relative url to an image.

.example < background: url('../images/thing.png'); >

Tip: Absolute paths for url() s will of course be excluded from url-rewriting. As such, url(‘/images/thing.png’) or url(‘http://example.com/images/thing.png’) won’t be touched.

Notice that relative URL? By default, Laravel Mix and webpack will find thing.png , copy it to your public/images folder, and then rewrite the url() within your generated stylesheet. As such, your compiled CSS will be:

.example < background: url(/images/thing.png?d41d8cd98f00b204e9800998ecf8427e); >

This, again, is a very cool feature of webpack’s. However, it does have a tendency to confuse those who don’t understand how webpack and the css-loader plugin works. It’s possible that your folder structure is already just how you want it, and you’d prefer that Mix not modify those url() s. If that’s the case, we do offer an override:

mix.sass('src/app.scss', 'dist/') .options(< processCssUrls: false >); 

With this addition to your webpack.mix.js file, we will no longer match url() s or copy assets to your public directory. As such, the compiled CSS will remain exactly as you typed it:

.example < background: url("../images/thing.png"); >

As an added bonus, when you disable url processing, your Webpack Sass compilation and extraction can compile far more quickly.

PostCSS Plugins

By default, Mix will pipe all of your CSS through the popular Autoprefixer PostCSS plugin. As a result, you are free to use the latest CSS 3 syntax with the understanding that we’ll apply any necessary browser-prefixes automatically. The default settings should be fine in most scenarios, however, if you need to tweak the underlying Autoprefixer configuration, here’s how:

mix.sass('resources/assets/sass/app.scss', 'public/css') .options( < autoprefixer: < options: < browsers: [ 'last 6 versions', ] >> >); 

Additionally, if you wish to disable it entirely — or depend upon a PostCSS plugin that already includes Autoprefixer:

mix.sass('resources/assets/sass/app.scss', 'public/css') .options(< autoprefixer: false >); 

It’s possible, however, that you’d like to apply additional PostCSS plugins to your build. No problem. Simply install the desired plugin through NPM, and then reference it in your webpack.mix.js file, like so:

mix.sass('resources/assets/sass/app.scss', 'public/css') .options(< postCss: [ require("postcss-custom-properties") ] >); 

Done! You may now use and compile custom CSS properties (if that’s your thing). For example, if resources/assets/sass/app.scss contains.

:root < --some-color: red; >.example

. when compiled, you’ll now see:

.example

PostCss Without Sass or Less

Alternatively, if you’d prefer to skip the Sass/Less/Stylus compile step entirely and instead use PostCSS, you may do so via the mix.postCss() method.

mix.postCss('resources/assets/css/main.css', 'public/css', [ require('precss')() ]); 

Notice that the third argument is an array of postcss plugins that should be applied to your build.

Standalone Sass Builds

If you do not wish Mix and Webpack to process your Sass in any way, you may instead use mix.standaloneSass() , which will improve the build time of your app drastically. Just remember: if you choose this route, Webpack won’t touch your CSS. It won’t rewrite URLs, copy assets (via file-loader), or apply automatic image optimization or CSS purification. If those features are unnecessary for your application, definitely use this option instead of mix.sass() .

mix.standaloneSass('resources/assets/sass/app.scss', 'public/css'); 

If you are using standaloneSass while watching for file changes with npm run watch then you will need to prefix imported files with underscores in order to flag them as partials (e.g. _header.scss, _alert.scss). Failing to do this will result in Sass compilation errors and/or extraneous CSS files.