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

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

Разберемся с тем как собирать 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"
]