Cómo usar PostCSS con Webpack

No hay problema alguno en usar PostCSS con Webpack. Voy a dejar aquí una configuración del uso del "postcss-loader" para ayudar a quien lo necesite.

En esta instalación tenemos varios plugin de webpack como html-webpack-plugin, copy-webpack-plugin y por supuesto postcss-loader, que tienes que usarlo después de css-loader y style-loader. No sé si todos son absolutamente necesarios porque es un copia pega de una instalación que tenía un poco antigua, pero seguramente sí lo sean.

Archivo webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: {
    main: './src/js/index.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/app.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/index.html',
    }),
    new CopyPlugin({
      patterns: [
        { from: 'src/images', to: 'images' },
      ],
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader'
        ],
      },
    ],
  }
}

Archivo postcss.config.js

Este archivo no tiene nada en particular. Se usa exactamente igual que se explica en la página de PostCSS.

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

Archivo package.json

Para poder lanzar este proceso de compilación de postCSS vía Webpack necesitarás los correspondientes scripts en el package.json:

"scripts": {
    "build": "NODE_ENV=production postcss src/css/styles.css --output dist/css/styles.css",
    "dev": "postcss src/css/styles.css --output dist/css/styles.css",
    "watch": "postcss src/css/styles.css --output dist/css/styles.css --watch",
    "start": "webpack-dev-server --mode development --open"
},

Como puedes apreciar, el CSS lo compilo directamente con PostCSS y Webpack lo uso solamente como servidor de desarrollo para tener el CSS compilado y su live-reload cada vez que se guarda los ficheros CSS del proyecto. Por supuesto que podrías compilar también con Webpack todo de una vez, sobre todo si en tu proyecto trabajas también con Javascript.

Sí que lo puedes usar y de hecho es una configuración bastante típica para poder tener todas las transformaciones del CSS integradas en el mismo proceso que compila el Javascript. Por ejemplo yo lo uso en un proyecto donde tengo Tailwind que trabaja con PostCSS y quiero además transpilar el Javascript para hacer los bundles.

El proceso de configuración requiere un poquito de conocimiento de webpack, cargar un loader de postCSS y configurarlo.

Los ejemplos instalación y demás los puedes encontrar en la página de PostCSS-loader.