CSS Academy · Aula

PostCSS no Vite e no Webpack

Integre o PostCSS a pipelines modernos de compilação usando a configuração do Vite e carregadores do webpack.

PostCSS no Vite e no Webpack é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.

PostCSS no Vite

O Vite oferece suporte integrado ao PostCSS. Crie um arquivo postcss.config.js na raiz do projeto, e o Vite o aplicará automaticamente a todos os arquivos CSS durante o desenvolvimento e a compilação.

// 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)
};

Opções de CSS do Vite

Como alternativa, configure o PostCSS diretamente em vite.config.js:

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

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

PostCSS no webpack

O webpack usa postcss-loader na cadeia de regras de módulos. Sempre coloque-o depois de css-loader e antes de qualquer outra transformação de CSS:

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

postcss-loader com arquivo de configuração

Indique um arquivo de configuração externo para o postcss-loader:

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

PostCSS com Sass no Vite

O Vite processa o Sass primeiro e, depois, o PostCSS. Instale o sass e os plug-ins do PostCSS — o Vite gerencia o pipeline automaticamente:

npm install --save-dev sass autoprefixer cssnano

postcss-preset-env

postcss-preset-env converte CSS moderno (aninhamento, mídia personalizada etc.) em CSS compatível com os navegadores — de forma semelhante ao Babel para JavaScript. Configure o estágio-alvo:

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

Módulos CSS com PostCSS

Os Módulos CSS (com nomes de classe com escopo) integram-se ao PostCSS tanto no Vite quanto no webpack. Eles processam o CSS pelo PostCSS antes de aplicar o escopo do módulo.

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

Verificando se o PostCSS foi aplicado

No DevTools do Vite, visualize os mapas de origem do CSS transformado. As propriedades com prefixos adicionadas pelo autoprefixer estarão visíveis na saída compilada. Execute vite build e inspecione dist/assets/*.css para verificar a redução feita pelo cssnano.

LightningCSS como alternativa

O Vite agora oferece suporte ao lightningcss como uma alternativa mais rápida ao PostCSS. Ele lida com prefixos automáticos, aninhamento e redução em uma única passagem do Rust:

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

Otimização da compilação de produção

Sempre habilite o cssnano (ou a redução do lightningcss) somente em compilações de produção. As compilações de desenvolvimento devem gerar CSS legível, com mapas de origem, para facilitar a depuração.

Verificação rápida

Onde ocorre o processamento do PostCSS na cadeia de carregadores de CSS do webpack?

Recapitulação

O Vite oferece suporte integrado ao PostCSS por meio de postcss.config.js. O webpack usa postcss-loader depois de css-loader. Use postcss-preset-env para pollyfills de CSS moderno. Habilite o cssnano somente em compilações de produção. Considere o lightningcss para compilações mais rápidas no Vite. Sempre gere mapas de origem para depurar CSS transformado.

Perguntas Frequentes

A aula “PostCSS no Vite e no Webpack” é grátis?

Sim — o texto completo de “PostCSS no Vite e no Webpack” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.

O que vou aprender em “PostCSS no Vite e no Webpack”?

Integre o PostCSS a pipelines modernos de compilação usando a configuração do Vite e carregadores do webpack. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar CSS Academy?

Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “PostCSS no Vite e no Webpack”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de CSS Academy?

Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para CSS Academy