{"id":18957,"library":"antd-theme-webpack-plugin","title":"Ant Design Theme Webpack Plugin","description":"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.","status":"maintenance","version":"1.3.9","language":"javascript","source_language":"en","source_url":"git://github.com/mzohaibqc/antd-theme-webpack-plugin","tags":["javascript","antd","ant-design","less","lessjs","css","theme","dynamic-theme","webpack"],"install":[{"cmd":"npm install antd-theme-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add antd-theme-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add antd-theme-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency – requires webpack 4 or 5 to function as a plugin.","package":"webpack","optional":false}],"imports":[{"note":"Package is CJS-only; ESM import will fail without a bundler interop. Use require() or configure bundler for CJS.","wrong":"import AntDesignThemePlugin from 'antd-theme-webpack-plugin';","symbol":"AntDesignThemePlugin","correct":"const AntDesignThemePlugin = require('antd-theme-webpack-plugin');"},{"note":"The plugin is exported as default, not named. Do not destructure.","wrong":"const { AntDesignThemePlugin } = require('antd-theme-webpack-plugin');","symbol":"AntDesignThemePlugin","correct":"const AntDesignThemePlugin = require('antd-theme-webpack-plugin');"},{"note":"Options object is mandatory; antDir, stylesDir, varFile, and themeVariables are required. Missing them causes runtime errors.","wrong":"new AntDesignThemePlugin()","symbol":"new AntDesignThemePlugin(options)","correct":"new AntDesignThemePlugin({ antDir: __dirname + '/node_modules/antd', stylesDir: ... })"}],"quickstart":{"code":"const path = require('path');\nconst AntDesignThemePlugin = require('antd-theme-webpack-plugin');\n\nconst options = {\n  antDir: path.join(__dirname, 'node_modules/antd'),\n  stylesDir: path.join(__dirname, 'src'),\n  varFile: path.join(__dirname, 'src/styles/variables.less'),\n  themeVariables: ['@primary-color'],\n  indexFileName: 'index.html',\n  generateOnce: false,\n  lessUrl: \"https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js\",\n  publicPath: \"\",\n  customColorRegexArray: [],\n};\n\nmodule.exports = {\n  // ... other webpack config\n  plugins: [\n    new AntDesignThemePlugin(options),\n  ],\n};","lang":"javascript","description":"Initializes the plugin with required options: antDir, stylesDir, varFile, themeVariables. Includes typical webpack config setup."},"warnings":[{"fix":"Add { javascriptEnabled: true } to less-loader options in webpack config.","message":"Requires less-loader with javascriptEnabled: true. Without it, Less.js runtime errors occur.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Add required HTML tags to your index.html.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use webpack 4 or apply manual webpack 5 compatibility patches.","message":"The plugin does not support webpack 5 out-of-the-box in some configurations; may cause build failures due to hooks API changes.","severity":"gotcha","affected_versions":">=1.0.0 <2.0.0"},{"fix":"Consider alternatives like antd-theme-generator or use Ant Design's built-in ConfigProvider for CSS variables.","message":"Package is no longer actively maintained; last update 2020. May break with newer Ant Design or webpack versions.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Set generateOnce: true in development to avoid repeated processing.","message":"The generateOnce: false option causes the plugin to re-run on every webpack rebuild, slowing HMR.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Add antDir: path.join(__dirname, './node_modules/antd') to the options object.","cause":"Missing antDir option in plugin configuration.","error":"Error: Options.antDir is required"},{"fix":"Use webpack 4 or find a webpack 5 compatible fork/plugin.","cause":"Plugin uses webpack 4 hooks API; incompatible with webpack 5 where tapAsync is absent.","error":"TypeError: Cannot read property 'tapAsync' of undefined"},{"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.","cause":"index.html missing the Less configuration script or color.less link.","error":"Less variables not injected into browser theme"},{"fix":"Set correct publicPath option matching your dev server's output path.","cause":"The color.less file is generated but not served by webpack-dev-server; publicPath may be misconfigured.","error":"Uncaught Error: .less stylesheet not loaded"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}