Registry / devops / antd-theme-webpack-plugin

antd-theme-webpack-plugin

library1.3.9jsnpmunverified

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.

devops

npm install antd-theme-webpack-plugin

github ↗package ↗

INSTALL

IMPORT

SIG · ANTD-THEME-WEBPACK

antd-theme-webpack-plugin

devopsjavascriptv1.3.9

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

AntDesignThemePlugin

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

✗ import AntDesignThemePlugin from 'antd-theme-webpack-plugin';

Package is CJS-only; ESM import will fail without a bundler interop. Use require() or configure bundler for CJS.

AntDesignThemePlugin

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

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

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

new AntDesignThemePlugin(options)

✓ new AntDesignThemePlugin({ antDir: __dirname + '/node_modules/antd', stylesDir: ... })

✗ new AntDesignThemePlugin()

Options object is mandatory; antDir, stylesDir, varFile, and themeVariables are required. Missing them causes runtime errors.

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), ], };

Debug

Known issues

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

fix

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

affects: >=1.0.0

gotchaindex.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.

affects: >=1.0.0

gotchaThe 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.

affects: >=1.0.0 <2.0.0

deprecatedPackage 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.

affects: >=1.0.0

gotchaThe 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.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Options.antDir is required

Missing antDir option in plugin configuration.

fix

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

TypeError: Cannot read property 'tapAsync' of undefined

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.

Less variables not injected into browser theme

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.

Uncaught Error: .less stylesheet not loaded

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.

Upgrade

Version history

1.3.9latest on npm

Audit

Dependencies

webpackrequiredPeer dependency – requires webpack 4 or 5 to function as a plugin.

Agent activity

36 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/mzohaibqc/antd-theme-webpack-plugin ↗

packagehttps://www.npmjs.com/package/antd-theme-webpack-plugin ↗