Sass и SCSS

Parcel предоставляет встроенную поддержку Sass/SCSS без необходимости ручной настройки сборщиков, загрузчиков или плагинов в базовых сценариях. Обработка файлов .scss и .sass интегрирована в пайплайн трансформаций и работает на уровне автоматического определения зависимостей.

При встрече импорта Sass-файла Parcel определяет тип ресурса, запускает соответствующий трансформер и включает результат в граф зависимостей приложения.

Установка зависимостей Sass

Хотя Parcel умеет работать с Sass автоматически, компилятор Sass должен быть доступен в проекте:

npm install -D sass

Parcel использует Dart Sass как основной движок компиляции. Отсутствие пакета sass приводит к ошибке сборки при первом обращении к .scss файлу.

Подключение SCSS-файлов

Импорт Sass-файлов выполняется напрямую из JavaScript или других SCSS-файлов.

Импорт из JS

import './styles/main.scss';

Импорт внутри SCSS

@import './partials/variables.scss';
@import './partials/mixins.scss';

body {
  font-family: Arial, sans-serif;
}

Parcel строит единый граф зависимостей, включая как JS, так и CSS/SCSS ресурсы, что позволяет использовать Sass как часть общего пайплайна приложения.

Базовые возможности SCSS в Parcel

Parcel не изменяет синтаксис Sass и не накладывает ограничений на его использование. Поддерживаются все стандартные возможности:

Переменные

$primary-color: #4a90e2;

.button {
  background-color: $primary-color;
}

Вложенность

.nav {
  ul {
    margin: 0;
    padding: 0;

    li {
      list-style: none;
    }
  }
}

Миксины

@mixin center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include center-flex;
}

Модули Sass и изоляция стилей

Parcel поддерживает SCSS Modules по аналогии с CSS Modules. Для активации используется соглашение об именовании файлов:

styles.module.scss

Пример использования

.title {
  font-size: 24px;
  color: black;
}
import styles from './styles.module.scss';

const el = document.createElement('h1');
el.className = styles.title;
document.body.appendChild(el);

Parcel автоматически преобразует классы в уникальные хэши, предотвращая конфликты имен.

Импорт зависимостей и разрешение путей

Parcel поддерживает несколько форм импорта внутри SCSS:

Относительные пути

@import '../base/reset.scss';

Алиасы (через package.json или конфигурацию проекта)

При использовании алиасов Parcel корректно разрешает пути:

@import 'styles/variables.scss';

Алиасы обрабатываются на уровне резолвера, что позволяет избегать длинных относительных цепочек.

Работа с ассетами внутри SCSS

Parcel автоматически обрабатывает ссылки на ресурсы внутри Sass-файлов.

Пример подключения изображения

.hero {
  background-image: url('./images/bg.png');
}

Parcel:

  • определяет файл как зависимость
  • копирует или оптимизирует изображение
  • заменяет путь на итоговый хэшированный URL

Source Maps для SCSS

По умолчанию Parcel генерирует source maps для Sass, что упрощает отладку в браузере.

Код SCSS отображается в DevTools без потери структуры:

  • сохранение вложенности
  • отображение исходных файлов
  • корректная трассировка ошибок

Обработка ошибок компиляции

Ошибки Sass выводятся напрямую в терминал и браузерный overlay в режиме разработки.

Пример типичной ошибки:

  • неверный синтаксис переменной
  • отсутствующий импорт
  • ошибка миксина

Parcel останавливает пересборку только для затронутого модуля, сохраняя остальной граф активным.

Инкрементальная сборка и кэширование

Parcel использует файловый кэш и инкрементальную пересборку:

  • изменения в .scss пересобираются локально
  • неизменённые модули берутся из кэша
  • пересчёт графа зависимостей минимизирован

Это особенно важно при работе с крупными стилевыми системами и дизайн-токенами.

PostCSS в связке с Sass

После компиляции SCSS Parcel может пропускать CSS через PostCSS-плагины.

Типичный сценарий:

  1. SCSS → CSS (Sass compiler)
  2. CSS → PostCSS трансформация
  3. финальная оптимизация

Подключение PostCSS выполняется через конфигурационный файл:

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
};

Оптимизация CSS, полученного из SCSS

Parcel выполняет несколько этапов оптимизации:

  • удаление неиспользуемых правил в production-режиме
  • минификация итогового CSS
  • объединение одинаковых селекторов
  • устранение дублирующихся импортов

SCSS при этом остаётся источником, а не итоговым артефактом сборки.

Использование современных возможностей Sass

Parcel поддерживает современные возможности Dart Sass:

Модули @use и @forward

@use 'sass:math';

.container {
  width: math.div(100%, 3);
}
@forward './base';

Рекомендуемый подход

Использование @use вместо устаревшего @import снижает глобальное загрязнение пространства имён и улучшает масштабируемость стилей.

Архитектура работы Sass внутри Parcel

Обработка SCSS проходит через единый pipeline Parcel:

  • обнаружение зависимости в графе
  • чтение исходного файла
  • передача в Sass compiler
  • преобразование в CSS AST
  • интеграция в общий CSS bundle
  • оптимизация и минификация (production)

Каждый шаг кэшируется и повторно используется при инкрементальных изменениях.

Производительность при больших стилевых кодовых базах

Parcel оптимизирует работу Sass за счёт:

  • параллельной обработки модулей
  • ленивой трансформации зависимостей
  • кеширования результатов компиляции
  • разделения CSS на чанки при code splitting

Это позволяет масштабировать SCSS-проекты без ручной настройки сборки.

Интеграция с другими типами ресурсов

Sass в Parcel не существует изолированно и может взаимодействовать с:

  • JavaScript (динамический импорт стилей)
  • изображениями (через url())
  • шрифтами (woff, woff2)
  • SVG-ассетами

Parcel автоматически объединяет все эти ресурсы в единый граф сборки, сохраняя целостность зависимостей.

Оглавление