Компиляция SASS / SCSS в VS Code. Подробная настройка плагина Live Sass Compiler

На чтение 2 мин Просмотров 9.2к. Опубликовано 03.04.2023

Разберемся с тем как собирать SASS / SCSS в редакторе Visual Studio Code. Рассмотрим подробную настройку плагина Live Sass Compiler.

Видео с настройкой плагина Live Sass Compiler

Материалы к уроку

Настройки для в setting.json для Live SASS Compiler

Сохраняем CSS в отдельную директорию
Сохраняем min.css файлы
Список исключений по директориям
Отключение .map файлов
Настройки автопрефиксов

// .css и min.css файлы в отдельную директорию
"liveSassCompile.settings.formats": [
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "~/../css/"
    },
    {
        "extensionName": ".min.css",
        "format": "compressed",
        "savePath": "~/../css/"
    }
],
// исключения
"liveSassCompile.settings.excludeList": [
    "**/node_modules/**",
    ".vscode/**"
],
// отключение .map файлов
"liveSassCompile.settings.generateMap": false,
//автопрефиксы, -webkit- -moz-..
"liveSassCompile.settings.autoprefix": [
    "> 1%",
    "last 2 versions"
]