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

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

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

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

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