Опубликовано: четверг, 27 июля 2023 г. в 08:25

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

Источник: «4 Methods to Quickly Add CSS to Your Laravel Site»

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

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

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

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

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

Создайте или используйте существующую папку в директории /public и сохраните в ней свой файл CSS. Например, вы можете сохранить его как /public/css/styles.css
Добавьте следующий код в ваш шаблон blade в разделе head blade-файла вашей страницы:
```
<link rel="stylesheet" href="{{ asset('css/styles.css') }}">
```

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

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

resources/views/card.blade.php:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS example</title>
    <link rel="stylesheet" href="{{ asset('css/styles.css') }}">
</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, выполните следующие действия:

Найдите URL CDN, где размещён файл CSS, который вы хотите использовать.
Добавьте приведённый ниже код в файл шаблона 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, выполните следующие шаги:

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

Создайте или отредактируйте файл 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 для создания минифицированного файла CSS, который будет храниться в папке /public:
```
npm run build
```
Если вы столкнулись с ошибкой типа 'vite' is not recognized as an internal or external command, вы можете исправить это, выполнив команду: npm install.
Добавьте следующую директиву @vite в ваш шаблон blade для подключения CSS:
```
@vite(['resources/css/styles.css'])
```
Теперь перезагрузите страницу, и стилизация CSS будет применена корректно.

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

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

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

Создайте новую папку в каталоге /resources. Назовите её, например, css
Сохраните файл CSS в созданной директории. Например, вы можете сохранить его как styles.css
Создайте или отредактируйте файл webpack.config.js в корневой директории Laravel. В этом файле вы можете задать расположение файла CSS:
webpack.config.js:
```
const mix = require('laravel-mix');
mix.css('resources/css/styles.css', 'public/css');
```
Выполните следующую команду npm, чтобы сгенерировать минифицированный файл CSS и сохранить его в общей папке:
```
npm run prod
```
Если вы столкнулись с ошибкой типа 'mix' is not recognized as an internal or external command, operable program or batch file, вы можете исправить это, выполнив команду npm install.
Добавьте следующую строку в раздел head:
```
<link href="{{ mix('/css/styles.css') }}" rel="stylesheet">
```
Теперь перезагрузите страницу, и стилизация CSS будет применена корректно.

Команда 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 сайт

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

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

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

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

Заключение

Дополнительные материалы

Предыдущая Статья

Следующая Статья

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

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

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