Ant Design Theme Webpack Plugin

1.3.9 verified Sat Apr 25 auth: no javascript maintenance

A webpack plugin that enables dynamic theme switching for Ant Design (antd) by generating color-specific Less/CSS files and injecting them into index.html. Version 1.3.9, stable but in maintenance mode; last updated in 2020. Works with webpack 4 or 5. Key differentiator: allows runtime theme variable changes (like @primary-color) without rebuilding the app, unlike compile-time theme customization. Uses client-side Less.js to recompile styles in the browser. Requires JavaScript enabled in less-loader and specific project structure.

Common errors

error Error: Options.antDir is required ↓

cause Missing antDir option in plugin configuration.

fix

Add antDir: path.join(__dirname, './node_modules/antd') to the options object.

error TypeError: Cannot read property 'tapAsync' of undefined ↓

cause Plugin uses webpack 4 hooks API; incompatible with webpack 5 where tapAsync is absent.

fix

Use webpack 4 or find a webpack 5 compatible fork/plugin.

error Less variables not injected into browser theme ↓

cause index.html missing the Less configuration script or color.less link.

fix

Ensure index.html includes <link rel="stylesheet/less" type="text/css" href="/color.less" /> and <script>window.less = { async: false, env: 'production' };</script> followed by less.js CDN.

error Uncaught Error: .less stylesheet not loaded ↓

cause The color.less file is generated but not served by webpack-dev-server; publicPath may be misconfigured.

fix

Set correct publicPath option matching your dev server's output path.

Warnings

breaking Requires less-loader with javascriptEnabled: true. Without it, Less.js runtime errors occur. ↓

fix Add { javascriptEnabled: true } to less-loader options in webpack config.

gotcha index.html must include <link rel="stylesheet/less" type="text/css" href="/color.less" /> and Less.js CDN script. If missing, theme won't load. ↓

fix Add required HTML tags to your index.html.

gotcha The plugin does not support webpack 5 out-of-the-box in some configurations; may cause build failures due to hooks API changes. ↓

fix Use webpack 4 or apply manual webpack 5 compatibility patches.

deprecated Package is no longer actively maintained; last update 2020. May break with newer Ant Design or webpack versions. ↓

fix Consider alternatives like antd-theme-generator or use Ant Design's built-in ConfigProvider for CSS variables.

gotcha The generateOnce: false option causes the plugin to re-run on every webpack rebuild, slowing HMR. ↓

fix Set generateOnce: true in development to avoid repeated processing.

Install

npm install antd-theme-webpack-plugin

yarn add antd-theme-webpack-plugin

pnpm add antd-theme-webpack-plugin

Imports

AntDesignThemePlugin
wrong
```
import AntDesignThemePlugin from 'antd-theme-webpack-plugin';
```
correct
```
const AntDesignThemePlugin = require('antd-theme-webpack-plugin');
```
Package is CJS-only; ESM import will fail without a bundler interop. Use require() or configure bundler for CJS.

AntDesignThemePlugin

wrong

const { AntDesignThemePlugin } = require('antd-theme-webpack-plugin');

correct

const AntDesignThemePlugin = require('antd-theme-webpack-plugin');

The plugin is exported as default, not named. Do not destructure.

new AntDesignThemePlugin(options)
wrong
```
new AntDesignThemePlugin()
```
correct
```
new AntDesignThemePlugin({ antDir: __dirname + '/node_modules/antd', stylesDir: ... })
```
Options object is mandatory; antDir, stylesDir, varFile, and themeVariables are required. Missing them causes runtime errors.

Quickstart

Initializes the plugin with required options: antDir, stylesDir, varFile, themeVariables. Includes typical webpack config setup.

const path = require('path');
const AntDesignThemePlugin = require('antd-theme-webpack-plugin');

const options = {
  antDir: path.join(__dirname, 'node_modules/antd'),
  stylesDir: path.join(__dirname, 'src'),
  varFile: path.join(__dirname, 'src/styles/variables.less'),
  themeVariables: ['@primary-color'],
  indexFileName: 'index.html',
  generateOnce: false,
  lessUrl: "https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js",
  publicPath: "",
  customColorRegexArray: [],
};

module.exports = {
  // ... other webpack config
  plugins: [
    new AntDesignThemePlugin(options),
  ],
};