Рассмотрим на примере подключение saas к проекту на Laravel. В каталоге resources если нет папки saas — создайте, в ней файл, например app.scss.
Рассмотрим настройки подключения стилей, препроцессоров и других инструментов. В корне проекта есть файл webpack.mix.js — в нем будет прописаны пути для компиляции, в нашем случае его конечная часть будет выглядеть вот так:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
вторая строка — показывает что при компиляции проекта — все стили будут записываться в файл. В каталоге с путем: public/css — будет создан файл app.css.
Более подробную информацию по подключению sass и less можно посмотреть на официальном сайте ларавел: https://laravel.com/docs/6.x/mix
Файл package.json должен иметь в конце примерно такой код (3 последних строки прописываем вручную, если их не было)
"devDependencies": {
"axios": "^0.19",
"cross-env": "^7.0",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.19",
"resolve-url-loader": "^3.1.0",
"sass": "^1.27.0",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.12"
}
Далее нам нужно установить на ПК 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 препроцессор.
