postcss-import: сборка из нескольких файлов

Когда стилей становится много, их удобно разложить по файлам: базовые стили отдельно, карточка поста отдельно. Обычный @import в CSS заставляет браузер скачивать каждый файл отдельным запросом. Плагин postcss-import выполняет @import при сборке: подставляет содержимое файлов на место команд, и браузер получает один файл.

Установка

npm install --save-dev postcss-import

Плагин ставится первым в списке — остальные должны получить уже склеенный CSS:

// postcss.config.js
import postcssImport from 'postcss-import';
import postcssPresetEnv from 'postcss-preset-env';
 
export default {
  plugins: [postcssImport(), postcssPresetEnv()],
};

Разбиение на файлы

Разложите стили блога так:

blog/
├── styles/
│   ├── main.css         ← точка входа
│   ├── base.css
│   └── post-card.css
└── postcss.config.js

Создайте styles/base.css и styles/post-card.css:

/* styles/base.css */
body {
  margin: 0;
  font-family: system-ui, sans-serif;
}

/* styles/post-card.css */
.post-card {
  padding: 16px;
  border-radius: 8px;
}

В styles/main.css подключите их в начале файла:

/* styles/main.css */
@import "./base.css";
@import "./post-card.css";
 
.post-list {
  display: grid;
  gap: 16px;
}

Чтобы увидеть работу самого postcss-import, временно оставьте в plugins только его и выполните npx postcss styles/main.css -o css/main.css:

body {
  margin: 0;
  font-family: system-ui, sans-serif;
}
.post-card {
  padding: 16px;
  border-radius: 8px;
}
.post-list {
  display: grid;
  gap: 16px;
}

Вместо команд @import — содержимое файлов в том же порядке. Обрабатывать нужно только main.css: остальные попадут в него сами. Верните postcss-preset-env в список — он обработает уже склеенный файл, и объявления @custom-media из любого подключённого файла будут видны везде.

CSS из пакетов npm

postcss-import ищет файлы и в node_modules. Например, сброс стилей modern-normalize:

npm install modern-normalize

/* styles/main.css */
@import "modern-normalize";
@import "./base.css";
@import "./post-card.css";

Имя пакета без пути — плагин сам найдёт его CSS-файл. В css/main.css первым окажется код modern-normalize.

В Vite не нужен

Vite склеивает @import сам, поэтому в проекте на Vite postcss-import не ставят. Плагин нужен, когда вы запускаете PostCSS через postcss-cli.

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

Поставить @import после правил. По стандарту CSS все @import должны идти в самом начале файла. postcss-import выведет предупреждение @import statements must precede all other statements и выбросит такой импорт из результата. Держите все @import первыми строками файла.