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

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

Честный VDS/VPS, на котором «Лунная База» живет уже 20+ лет

Задумываетесь о том, чтобы поднять свой pet-проект, сайт клиента или настроить окружение для разработки? Уже пора подумать, где арендовать железо.

Лунная База хостится на FirstVDS более 20 лет. Мыслей о том, чтобы перебраться на другой хостинг, не было ни разу (хотя опыт работы с другими вариантами, конечно, есть).

Бывали разные ситуации, но они бывают на любом железе. Главное, что нужно понять: здесь нет маркетинговой шелухи и сказок про «мы всё сделаем за вас». Если вы берете VDS — вам дают полный root, возможность накатить любую ОС и не лезут в ваши конфиги.

Если в саппорт написать с вопросом по вашему коду и получить ответ: «Читайте документацию и разбирайтесь сами» или «Обратитесь к профильному специалисту» — это не повод обижаться. Это повод углубить свои знания в DevOps и сайтостроении! Бегите от тех, кто пообещает: «Мы всё чиним и настраиваем абсолютно бесплатно!». Никто никогда не работает «по доброте душевной» в ущерб себе, а бесплатный сыр в администрировании обычно заканчивается сломанной базой данных.

Что по факту: Гибкое масштабирование ядер и RAM, экономия по сравнению с физическими серверами и адекватная панель ispmanager, если она вам нужна.

Посмотреть тарифы VDS/VPS

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 стилями (или нескольких файлов в зависимости от функционала страниц проекта).

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

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

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

Самый честный хостинг за 20+ лет существования Лунной Базы

Задумываешься о том, чтобы поднять свой сайт в Интернете? Уже пора подумать о том, какой хостинг выбрать?

Лунная База хостится 20+ лет на firstDVS. При этом, мыслей о том, чтобы перебраться на другой хостинг не было. (Но, при этом есть опыт работы с другими вариантами.)

Бывали с firstDVS разные ситуации, но, они бывают на всех хостингах. Единственное, что тут важно понять, - это то, что никто ничего тебе не будет впаривать... Но, и работать за тебя тоже никто не станет. Если в саппорт ответили: «Читайте по ссылке и разбирайтесь сами...» или вообще «Обратитесь за помощью к специалисту», - это повод углубить свои знания в области сайтостроения, а не бежать к тем, что пообещают: «Мы всё чиним и всё делаем за своих клиентов абсолютно бесплатно!» Никто никогда ничего ни за кого "по доброте душевной" не делал, не делает и не будет делать!

Выбрать