Небольшой лайфхак, позволяющий настроить автокомпиляцию SCSS —> CSS:
1. Установите NodeJS с сайта https://nodejs.org/ (обычно версия LTS подходит всем)
2. В папке со своим проектом для изучения SCSS создайте две директории с названиями scss и css. В первую поместите свои файлы SCSS. Вторая директория будет содержать автоматически скомпилированные файлы.
3. В папке со своим проектом (не в директории scss или css, а прямо в корне вашего проекта) также создайте файл package.json со следующим содержимым:
{
"name": "sample",
"version": "1.0.0",
"scripts": {
"scss": "sass --watch scss:css"
},
"author": "",
"license": "ISC",
"dependencies": {
"sass": "^1.34.0"
}
}
4. Откройте командую строку (терминал) и перейдите в вашу директорию с проектом, например cd ~/docs/my_project
5. Запустите команду npm install, которая установит библиотеку sass - она и будет выполнять компиляцию.
6. После установки запустите команду npm run scss - она "повиснет" в командой строке и будет ожидать любых изменений файлов в папке scss. Как только изменения сделаны и файл в этой папке сохранён, произойдёт автоматическая компиляция в папку css. Для остановки процесса используйте комбинацию клавиш Ctrl+C или Cmd+C (либо Ctrl+Break, Cmd+Break)
Post #35
169