CSS Academy · Урок

PostCSS в Vite и Webpack

Интегрируйте PostCSS в современные конвейеры сборки с помощью конфигурации Vite и загрузчиков webpack.

«PostCSS в Vite и Webpack» — бесплатный урок CSS Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

PostCSS в Vite

Vite имеет встроенную поддержку PostCSS. Создайте файл postcss.config.js в корневой папке проекта, и Vite автоматически применит его ко всем файлам CSS во время разработки и сборки.

// postcss.config.js
import autoprefixer from 'autoprefixer';
import cssnano from 'cssnano';

export default {
  plugins: [
    autoprefixer,
    process.env.NODE_ENV === 'production' ? cssnano({ preset: 'default' }) : false
  ].filter(Boolean)
};

Параметры CSS в Vite

Также можно настроить PostCSS непосредственно в vite.config.js:

// vite.config.js
import { defineConfig } from 'vite';
import autoprefixer from 'autoprefixer';

export default defineConfig({
  css: {
    postcss: {
      plugins: [autoprefixer()]
    }
  }
});

PostCSS в webpack

webpack использует postcss-loader в цепочке правил модулей. Всегда размещайте его после css-loader и перед любыми другими преобразованиями CSS:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: ['autoprefixer']
              }
            }
          }
        ]
      }
    ]
  }
};

postcss-loader с файлом конфигурации

Укажите для postcss-loader внешний файл конфигурации:

{
  loader: 'postcss-loader',
  options: {
    postcssOptions: {
      config: './postcss.config.js'
    }
  }
}

PostCSS вместе с Sass в Vite

Vite сначала обрабатывает Sass, а затем PostCSS. Установите sass и плагины postcss — Vite автоматически управляет конвейером:

npm install --save-dev sass autoprefixer cssnano

postcss-preset-env

postcss-preset-env преобразует современный CSS (вложенность, пользовательские медиазапросы и т. д.) в CSS, совместимый с браузерами, подобно тому как Babel работает с JavaScript. Настройте целевой этап:

plugins: [
  require('postcss-preset-env')({
    stage: 3, // use stage 3+ features
    features: { 'nesting-rules': true }
  })
]

CSS Modules с PostCSS

CSS Modules (классы с ограниченной областью действия) интегрируются с PostCSS и в Vite, и в webpack. Они пропускают CSS через PostCSS до применения ограничения области действия модуля.

// vite.config.js
export default {
  css: {
    modules: { localsConvention: 'camelCase' },
    postcss: { plugins: [autoprefixer()] }
  }
}

Проверка применения PostCSS

В DevTools Vite просмотрите карты исходного кода преобразованного CSS. Свойства с префиксами от autoprefixer будут видны в скомпилированном результате. Выполните vite build и проверьте dist/assets/*.css, чтобы убедиться в минификации с помощью cssnano.

LightningCSS как альтернатива

Теперь Vite поддерживает lightningcss как более быструю альтернативу PostCSS. Он выполняет добавление префиксов, обработку вложенности и минификацию за один проход на Rust:

export default {
  css: {
    transformer: 'lightningcss',
    lightningcss: {
      targets: browserslistToTargets(browserslist('>= 0.25%'))
    }
  }
}

Оптимизация сборки для рабочей среды

Всегда включайте cssnano (или минификацию lightningcss) только для сборок рабочей среды. Сборки для разработки должны выдавать читаемый CSS с картами исходного кода для упрощения отладки.

Быстрая проверка

Где выполняется обработка PostCSS в цепочке загрузчиков CSS webpack?

Итоги

Vite имеет встроенную поддержку PostCSS через postcss.config.js. webpack использует postcss-loader после css-loader. Используйте postcss-preset-env для полифиллов современного CSS. Включайте cssnano только для сборок рабочей среды. Рассмотрите lightningcss для более быстрых сборок Vite. Всегда создавайте карты исходного кода для отладки преобразованного CSS.

Часто задаваемые вопросы

Урок «PostCSS в Vite и Webpack» бесплатный?

Да — полный текст урока «PostCSS в Vite и Webpack» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «PostCSS в Vite и Webpack»?

Интегрируйте PostCSS в современные конвейеры сборки с помощью конфигурации Vite и загрузчиков webpack. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «PostCSS в Vite и Webpack»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к CSS Academy