Подключение препроцессора sass и less в Laravel. Установка node.js

0
120

Рассмотрим на примере подключение saas к проекту на Laravel. В каталоге resources если нет папки saas — создайте, в ней файл, например app.scss.

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

вторая строка — показывает что при компиляции проекта — все стили будут записываться в файл. В каталоге с путем: public/css — будет создан файл app.css.

Более подробную информацию по подключению sass и less можно посмотреть на официальном сайте ларавел: https://laravel.com/docs/6.x/mix

 

Файл package.json должен иметь в конце примерно такой код (3 последних строки прописываем вручную, если их не было)

Далее нам нужно установить на ПК node.js. Перейдем на страницу: https://nodejs.org/en/

 

Выбираем рекомендуемую версию, скачиваем и устанавливаем как обычную программу для Windows. Что бы после установки node.js заработал глобально, в том числе и через консоль OpenServer, нужно зайти в папку с установленным ОпенСервером, каталог Openserver/userdata/config и создать там файл path.txt. В файл прописать путь к установленному node.js, например: C:\Program Files\nodejs\. Сохраняем файл. В настройках OpenServer — вкладка СерверНастройка использования переменной Path — выбираем последний пункт:

 

 

Перезагружаем OpenServer (выйти и зайти заново). Теперь в консоли будут работать команды npm. Для теста  можно написать команду: npm -v или node -v (покажет установленную версию).

 

 

Далее, находясь в папке с проектом, выполним команду npm i

 

 

Установятся модули node.js и в каталоге проекта, появится соответствующая директория:

 

 

Далее подключим стили для проекта. В файле app.scss пропишем, например, фон для body:

 

 

Далее в терминале (консоли) выполним команду npm run dev, в папке public будет создана папка css с файлом app.css:

 

 

Сейчас нужно подключить созданный файл css в хедере:

 

 

Если обновить страницу проекта, увидим новый фон:

 

 

Далее, что бы нам каждый раз не вводить предыдущую команду при каждом изменении файла scss, что бы заново компилировать css — выполним команду npm run watch. В этом случае Laravel будет автоматически отслеживать каждое изменение файлов стилей и файлов js-скриптов.

 

 

Аналогичным образом подключаем less препроцессор.

 

 

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here