PostCSS en Vite y Webpack
Integre PostCSS en pipelines de compilación modernos mediante la configuración de Vite y los loaders de webpack.
PostCSS en Vite y Webpack es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
PostCSS en Vite
Vite incluye compatibilidad integrada con PostCSS. Cree un archivo postcss.config.js en la raíz del proyecto y Vite lo aplicará automáticamente a todos los archivos CSS durante el desarrollo y la compilación.
// 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)
};Opciones de CSS de Vite
Como alternativa, configure PostCSS directamente en vite.config.js:
// vite.config.js
import { defineConfig } from 'vite';
import autoprefixer from 'autoprefixer';
export default defineConfig({
css: {
postcss: {
plugins: [autoprefixer()]
}
}
});PostCSS en webpack
webpack utiliza postcss-loader en la cadena de reglas de módulos. Colóquelo siempre después de css-loader y antes de cualquier otra transformación 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 con archivo de configuración
Indique a postcss-loader que utilice un archivo de configuración externo:
{
loader: 'postcss-loader',
options: {
postcssOptions: {
config: './postcss.config.js'
}
}
}PostCSS con Sass en Vite
Vite procesa primero Sass y, después, PostCSS. Instale sass y los plugins de PostCSS; Vite gestiona automáticamente la canalización:
npm install --save-dev sass autoprefixer cssnanopostcss-preset-env
postcss-preset-env convierte CSS moderno (anidamiento, media queries personalizadas, etc.) en CSS compatible con los navegadores, de forma similar a Babel para JavaScript. Configure la etapa objetivo:
plugins: [
require('postcss-preset-env')({
stage: 3, // use stage 3+ features
features: { 'nesting-rules': true }
})
]CSS Modules con PostCSS
CSS Modules (con nombres de clase con alcance) se integra con PostCSS tanto en Vite como en webpack. El CSS se procesa mediante PostCSS antes de aplicar el alcance de los módulos.
// vite.config.js
export default {
css: {
modules: { localsConvention: 'camelCase' },
postcss: { plugins: [autoprefixer()] }
}
}Comprobar que se aplica PostCSS
En las herramientas de desarrollo de Vite, consulte los mapas de origen del CSS transformado. Las propiedades con prefijos de autoprefixer serán visibles en la salida compilada. Ejecute vite build e inspeccione dist/assets/*.css para verificar la minificación de cssnano.
LightningCSS como alternativa
Vite ahora admite lightningcss como una alternativa más rápida a PostCSS. Gestiona los prefijos automáticos, el anidamiento y la minificación en un único paso de Rust:
export default {
css: {
transformer: 'lightningcss',
lightningcss: {
targets: browserslistToTargets(browserslist('>= 0.25%'))
}
}
}Optimización de la compilación para producción
Habilite siempre cssnano (o la minificación de lightningcss) únicamente para las compilaciones de producción. Las compilaciones de desarrollo deben generar CSS legible con mapas de origen para facilitar la depuración.
Comprobación rápida
¿Dónde se realiza el procesamiento de PostCSS en una cadena de cargadores CSS de webpack?
Resumen
Vite incluye compatibilidad integrada con PostCSS mediante postcss.config.js. webpack utiliza postcss-loader después de css-loader. Utilice postcss-preset-env para aplicar polyfills de CSS moderno. Habilite cssnano únicamente en las compilaciones de producción. Considere lightningcss para obtener compilaciones más rápidas en Vite. Genere siempre mapas de origen para depurar el CSS transformado.
Aprende CSS con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 40
- Lecciones
- 159
Preguntas frecuentes
¿La lección «PostCSS en Vite y Webpack» es gratis?
Sí — el texto completo de «PostCSS en Vite y Webpack» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «PostCSS en Vite y Webpack»?
Integre PostCSS en pipelines de compilación modernos mediante la configuración de Vite y los loaders de webpack. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «PostCSS en Vite y Webpack»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Qué hace PostCSS y cómo funciona
- Autoprefixer y cssnano
- Plugins personalizados de PostCSS
- PostCSS en Vite y Webpack