В этом гайде мы рассмотрим как сделать автоматическую компиляцию sass/scss файлов в .css и .css.map в VS CODE и как сделать уменьшенную версию CSS. Для этого нам нужно установить расширение Live Sass Compiler.

Плагин предлагает следующие возможности:

• Живая компиляция SASS и SCSS.
• Настраиваемое расположение файла экспортируемого CSS.
• Настраиваемый экспортируемый стиль CSS (расширенный, сжатый).
• Настраиваемое имя расширения (.css или .min.css).
• Быстрое управление строкой состояния.
• Исключить определенные папки по настройкам.
• Поддержка автопрефикса
• Ссылка на модуль узла с тильдой в начале, например, ~/nodePackage/theSass.scss

Для установки следуем поэтапно:

1. Запускаем VS CODE

2. Скачиваем и устанавливаем расширение Live Sass Compiler - Visual Studio Marketplace из браузера, либо в поиске расширений по идентификатору: @glenn2223.live-sass

3. Теперь перейдем к вашему файлу SCSS, в моем случае, это модульные файлы scss, подключенные к основному scss файлу из моего сайта notehunter.net

4. Внизу на панели вы увидите надпись с иконкой глаза: Watch Sass, жмем ее, и файл при изменении, добавлении фрагментов стилей создаст css файл, куда будет постоянно компилировать фрагменты стилей из всех scss файлов.

Результат работы плагина:

При изменении файла scss, у меня скомпилировался CSS, как видно из логов.

Как оптимизировать CSS файл?

1. Для этого нажимаем Ctrl+Shift+P и вводим Открыть пользовательские настройки (JSON)

2. Откроется файл с настройками

3. Добавим следующий фрагмент в настройки как на скриншоте выше:

"liveSassCompile.settings.formats":[
        {
        "format": "compressed"
        },    
    ]

Таким образом, мы получим сжатый CSS при компиляции.

Также есть пример большего количества настроек, которые Вы можете применить:

{
     "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.autoprefix": [
        "defaults"
    ]
}

Подробнее о всех настройках: vscode-live-sass-compiler/settings.md at 84738b5f8a33c739bbfd6564d720a3de80fb2968 · glenn2223/vscode-live-sass-compiler (github.com)