VSCode: Настройка расширения Sass

В одном из уроков по HTML/CSS была тема по препроцессору SASS. Для работы с ним нужно было использовать либо онлайн-конвертер (scout-app.io), либо устанавливать отдельное приложение. Я нашёл для VSCode расширение Sass (vscode-sass-indented), которое могло всё это делать прямо в VSCode. Поскольку в уроке файл style.sass конвертировался в style.css, то в онлайн-конвертере можно было выбрать режим конвертирования «сжатый» (compressed), но по умолчанию для расширения в VSCode такой настройки не было.
Нашёл эти настройки в документации к другому расширению — vscode-live-sass-compiler, там можно создать отдельные настройки (как для текущего проекта, так и глобальные), где можно указать тип конвертирования, а также путь сохранения файла style.css. Хотя расширение другого автора, но настройки одни и те же. Возможно это форк, поэтому всё работает.

.vscode\settings.json
{
     "liveSassCompile.settings.formats":[
        {
            "format":"expanded",
            "extensionName": ".css",
            "savePath": "~/../css"
        },
        {
            "extensionName": ".min.css",
            "format": "compressed",
            "savePath": "~/../dist/css"
        }
    ],
    "liveSassCompile.settings.excludeList": [
       "/**/node_modules/**",
       "/.vscode/**"
    ],
    "liveSassCompile.settings.generateMap": true,
    "liveSassCompile.settings.showOutputWindowOn": "Warning",
    "liveSassCompile.settings.autoprefix": [
        "defaults"
    ]
}

Здесь можно сменить строчку:

"format": "expanded",

на

"format": "compressed",

Здесь я также добавил следующую строчку:

    "liveSassCompile.settings.showOutputWindowOn": "Warning",

Эта настройка отключает появление консоли с результатами компиляции после каждого сохранения файла. Теперь консоль будет открываться только в случае предупреждений или ошибок при компиляции.



Запись опубликована автором в рубрике Software с метками , .