Cargador Postcss para configuración de Webpack4CSS

postcss-loader es un cargador de CSS que debería ser una parte integral de la configuración del paquete web. Es responsable del procesamiento adicional de archivos CSS, como agregar prefijos del navegador, comprimir CSS, etc.

Para configurar postcss-loader, puede configurar opciones específicas en webpack.config.js o crear un nuevo postcss.config.js que defina la configuración de postcss-loader.

Este documento se basa en la versión del paquete dependiente:

La forma recomendada es utilizar el archivo postcss.config.js:

El valor de env es Process.env.NODE_ENV, se puede utilizar para determinar si está en modo de desarrollo o producción.

Por supuesto, esto también se puede hacer en webpack.config.js, pero es un poco redundante, especialmente cuando necesitas usar postcss-loader en múltiples reglas:

Compresión Esta sección de la documentación de CSS Webpack explica otras formas de minimizar CSS.

Usando el cargador de estilos:

Usando MiniCssExtractPlugin: Tenga en cuenta que el mapa fuente debe configurarse como "en línea". "De lo contrario, el archivo fuente .less aún no se podrá encontrar durante la depuración y solo se podrá encontrar el archivo CSS compilado.