Сборка для публикации и частые ошибки

Во время разработки CSS должен быть читаемым и иметь карты исходников. Для публикации — как можно меньше. Sass выдаёт и то и другое из одних исходников: флаг --style выбирает формат результата.

Сжатый вывод

По умолчанию Sass использует стиль expanded — читаемый CSS, который вы видели на протяжении курса. Стиль compressed убирает пробелы, переносы строк и последние точки с запятой:

// styles/main.scss
$primary: #2563eb;
 
.btn {
  color: white;
  background: $primary;
 
  &:hover {
    background: black;
  }
}

npx sass --style=compressed --no-source-map styles/main.scss css/main.css

Весь css/main.css превращается в одну строку:

.btn{color:#fff;background:#2563eb}.btn:hover{background:#000}

Sass ещё и сократил цвета: white стал #fff. Браузер читает этот файл так же, как развёрнутый.

Скрипты для обоих режимов

Добавьте обе команды в package.json:

{
  "scripts": {
    "dev": "sass --watch styles/main.scss css/main.css",
    "build": "sass --style=compressed --no-source-map styles/main.scss css/main.css"
  }
}

Работайте с npm run dev, а перед загрузкой сайта выполняйте npm run build. В проекте на Vite это не нужно: npm run build там уже компилирует и сжимает стили.

Нужна ли папка css/ в Git

Скомпилированный CSS всегда можно пересоздать из исходников, поэтому обычно папку css/ добавляют в .gitignore и собирают на сервере или в CI. Коммитьте её, только если хостинг не умеет запускать npm run build — например, простой статический хостинг без шага сборки.

Список частых ошибок

Ошибка	Что происходит	Как избежать
Подключить `main.scss` в HTML	Стили не применяются	Подключайте скомпилированный `.css`
Править `css/main.css`	Изменения перезаписываются	Правьте только `styles/`
Частичный файл без `_`	Появляется лишний CSS-файл	Начинайте имена частичных файлов с `_`
Нет `@use` в компоненте	`Undefined variable`	Каждый файл подключает то, что использует
Деление через `/`	Предупреждение об устаревании	`math.div()`
`@extend` внутри `@media`	Ошибка компиляции	Миксин вместо него
Глубокая вложенность	Длинные хрупкие селекторы	До трёх уровней
Цикл «на всё»	Тяжёлый CSS-файл	Генерируйте только используемое
Функция Sass над `var()`	Ошибка компиляции	Вычисляйте до пользовательского свойства

Проверьте размер

После сборки посмотрите размер файла: ls -l css/main.css в macOS и Linux или свойства файла в Windows. Если CSS вдруг вырос после добавления миксина или цикла, загляните в развёрнутый результат и посмотрите, что сгенерировалось.

Частая ошибка

Публикация сборки для разработки. Развёрнутый CSS с картой исходников работает, но он больше, а файл .map позволяет любому прочитать ваши исходники Sass. Делайте npm run build последним шагом перед каждой загрузкой и проверяйте, что в публикуемой папке не осталось main.css.map.

Спасибо, что читаете!