mzohaibqc / antd-theme-webpack-plugin

A webpack plugin for Dynamic theme generation for Ant Design

Zohaib Ijaz

I am Sr. Software Engineer working at Enquizit, Lahore. I am a full stack developer and feel awesome working with React and Python. I am passionate about coding best practices and love to learn new things, technologies and to share that knowledge.

Currently, I am focused on Javascript echo system and try to contribute in the form of open source github projects or npm packages in my free time.

antd-theme-webpack-plugin's Issues

Modify non-color variables

I am not able to modify @border-radius-base. I believe this is because antd-theme-generator filters these variables out.

Would it be possible to add this feature?

customize-cra

Hi,
Firstly thank you, this looks like a really useful tool.
For create-react-app projects is it possible to use this with customize-cra instead of react-app-rewired, as react-app-rewired is now only "lightly" maintained.

dva project demo?

Component style issues

My project have a problem.
I use your plugin, but he can only change the style of antd.
Can't change my own component.
Are you willing to help?
this is my config.

  const options = {
    antDir: path.join(__dirname, './node_modules/antd'),
    stylesDir: path.join(__dirname, './src/'),
    varFile: path.join(__dirname, './node_modules/antd/lib/style/themes/default.less'),
    mainLessFile: path.join(__dirname, './src/index.less'),
    themeVariables: ['@primary-color'],
    indexFileName: 'index.html',
  };

Thank you anyway

Using react-custom-scrollbars will always display scrollbars.

Using react-custom-scrollbars will always display scrollbars.

I don't know why and how to solve it.

styles are overriding many times.

Thanks for your project.

My issue is all variable items are repeated 3 times in color.less.

Is there a way to use it in umi project?

umi is a powerful framework for antd and dva users.

Now I'm using umi to develop and I don’t know is there a way to use the antd-theme-webpack-plugin in umi? The ability to modify less var dynamically is really important for our projects.

GET http://localhost:3001/color.less 404 (Not Found)

如果不是生产环境这个color.less找不到，事件触发会报错，同时index.html为什么还要引入less.js?

Tapable.apply is deprecated. Call apply on the plugin directly instead

According to this issue. We are getting this warning when trying to use this plugin with webpack 4.3.

Upgrade antd-theme-generator

The antd-theme-generator package is written to death and needs to be upgraded to use the new features.

 "antd-theme-generator": "1.0.6",

${options.publicPath}/color.less 导致在非服务根目录下无法找到color.less

${options.publicPath}/color.less 导致在非服务根目录下无法找到color.less 默认值是“” 按道理应该直接调用 homepage的配置，跟随系统配置而变化，其他所有路径在file协议下都没有问题，只有这个插件无法正常工作！ 当然，我直接通过，构造参数options 进行了覆盖，解决了此问题

无法修改 node_modules 中其他使用 Antd 变量组件的 theme

问题描述

我在项目，通过npm的方式，使用了一个基于Antd变量的组件。
如果 node_modules 中的其他组件使用了Antd的变量，那么当调用 window.less.modifyVars(vars) 修改变量之后，node_modules 中组件的样式不会生效。

示例地址

• 演示项目：antd-theme-demo
• 单个组件地址：antd-v3-simple-switch

插件配置

const path = require('path');
const {
  override,
  fixBabelImports,
  addLessLoader,
  addBabelPlugins,
  addWebpackPlugin,
} = require('customize-cra');
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/variables.less'),
  mainLessFile: path.join(__dirname, './src/style.less'),
  themeVariables: ['@primary-color'],
  indexFileName: 'index.html',
  generateOnce: false, // generate color.less on each compilation
};

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    // modifyVars: {
    //   '@primary-color': '#00375B',
    // },
    javascriptEnabled: true,
  }),
  addWebpackPlugin(new AntDesignThemePlugin(options)),
);

问题截图

运行项目，打开 http://localhost:3066/comp/switch ，可以看到示例效果：

Using a local version of less.js

We've found that the cdn for less has been slowing requests to our application so we wanted to move to a local copy of it. I'm having a pretty hard time getting that to work though. I know you can give the options a lessUrl which i've done but I still get the error 'window.less.modifyVars' is not a function.

Any guidance on this issue?

Inline JavaScript is not enabled. Is it set in your options?

已经javascriptEnabled: true了，可还是出现Inline JavaScript is not enabled. Is it set in your options?这样的错误，无法识别color.less中的js函数是什么原因呢？（用less v2版本没问题）
如果不用动态主题，只是自定义antd，是正常的
loader

if (config.antd.enabled || config.theme.enabled) {
            const varsPath = path.join(
                config.paths.src,
                config.antd.options.dir,
                config.antd.options.varFile,
            );
            if (!isFile(varsPath)) {
                throw new Error(`Style variables path ${varsPath} not exists!`);
            }
            const customModifyVars = getThemeVariables(
                fs.readFileSync(varsPath, 'utf8'),
            );
            lessOptions = {
                ...lessOptions,
                javascriptEnabled: true,
                modifyVars: {
                    ...lessOptions.modifyVars,
                    ...customModifyVars,
                },
            };
        }
        rules.use('less').loader('less-loader').options({
            sourceMap: config.isdev,
            lessOptions,
        });

插件

chain.when(config.theme.enabled, (chainPipe) => {
        chainPipe
            .plugin('theme')
            .use(new AntDesignThemePlugin(getThemeOptions(config)))
            .end()
            .plugin('copy')
            .use(new CopyPlugin(getCopyLessPatterns(config)))
            .end();

getThemeOptions(config)生成的配置

antDir: '/xxx/admin/node_modules/antd',
  stylesDir: '/xxx/admin/apps/admin/src/styles',
  varFile: '/xxx/admin/apps/admin/src/styles/variables.less',
  mainLessFile: '/xxx/admin/apps/admin/src/styles/main.less',
  themeVariables: [
    '@primary-color',
   ...
  ],
  indexFileName: 'index.html',
  generateOnce: false,
  lessUrl: '/less.min.js',
  publicPath: '',

在devmiddlware下运行 less.min.js以及color.less都能正常访问，就是color.less出现Inline JavaScript is not enabled这样的错误

Cannot use in UMI

I get a error below when I run 'umi dev':

× error Plugin user:node_modules/antd-theme-webpack-plugin/index.js in
itialize failed

Class constructor AntDesignThemePlugin cannot be invoked without 'new'
TypeError: Class constructor AntDesignThemePlugin cannot be invoked without
'new'

customized styles missed in antd-init

Hi, when I run antd-init project in your example folder by "npm start", I find that some properties pf the .logo styles are missed, for example "width:xxx; height: xxx;" but the create-react-app project works well.

I note that the webpackConfig object has some slight difference between them.
My project is dva based, which has the same problem with antd-init, what's the cause?
I guess it has something to do with atool-build?

after refresh，how can the app use new setting theme?

I use react app and config-overrides.js, after refresh，theme go back default, how can the app use new setting theme?

Some component's color isn't updated in light theme.

Describe the bug

I tried customize-cra example, I realized that the component's color (hover button, progress bar, hover link color) is not updated but using default color in light theme. And selected item in the Select component is not updated in the dark theme as well.

Show your code

https://github.com/mzohaibqc/antd-theme-webpack-plugin/blob/master/examples/customize-cra/config-overrides.js

Screenshots

Light:

Dark:

Version

"antd-theme-webpack-plugin": "^1.3.4",

can't change @primary-color at other less file

1. In varFile (variables.less):

@import "../../node_modules/antd/lib/style/themes/default.less";
@primary-color: red;

2. Then i modify it:

window.less.modifyVars({ "@primary-color": "green" )}

3. use @primary-color at other less file

<div className="modified" />

.modified {
    background-color: @primary-color
}

result: @primary-color is undefined;

@import "./variables.less";
.modified {
    background-color: @primary-color
}

result: i cant change .modified' class color

How to switch between dark and light mode?

Hi,

New to this whole themeing thing. I want to dynamically change colors but also be able to use the new Ant Design Dark mode whenever a user wants to. How would I do this with your system?

Here is my current config-override.js file:

const path = require("path");
const fs = require("fs");
const {
  override,
  fixBabelImports,
  addLessLoader,
  addWebpackPlugin,
} = require("customize-cra");
const { getThemeVariables } = require("antd/dist/theme");
const AntDesignThemePlugin = require("antd-theme-webpack-plugin");

const options = {
  stylesDir: path.join(__dirname, "./src/styles"),
  antDir: path.join(__dirname, "./node_modules/antd"),
  varFile: path.join(__dirname, "./src/styles/variables.less"),
  mainLessFile: path.join(__dirname, "./src/styles/main.less"),
  themeVariables: [
    "@primary-color",
    "@secondary-color",
    "@text-color",
    "@text-color-secondary",
    "@heading-color",
    "@layout-body-background",
    "@btn-primary-bg",
    "@layout-header-background",
    "@border-color-base",
  ],
  generateOnce: true, // generate color.less on each compilation
};

module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: true,
  }),
  addWebpackPlugin(new AntDesignThemePlugin(options)),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: getThemeVariables({
      dark: true,
    }),
  })
);

why can't I set @font-size-base to customize the font-size.

// vue.config.js
confireWebpack: {
plugins: [new AntDesignTHemePlugin({
antDir: path.join(__dirname, './node_modules/ant-design-vue'),
stylesDir: path.join(__dirname, './src/assets/theme'),
varFile: path.join(__dirname, './src/assets/theme/variables.less'),
mainLessFile: path.join(__dirname, './src/assets/theme/index.less'),
outputFilePath: path.join(__dirname, './public/color.less'),
themeVariables: ['@primary-color', '@text-color', '@font-size-base', '@font-size-lg'],
indexFileName: './public/index.html',
generateOnce: false,
})]
}

// .vue
window.less.modifyVars({
"@primary-color": '#f5222d',
"@text-color": '#ffb3b3',
"@font-size-base": '12px'
});

primary-colr and text-color can change successfully. but font-size-color throw error:

SyntaxError: Inline JavaScript is not enabled. Is it set in your options?

@mzohaibqc `SyntaxError: Inline JavaScript is not enabled. Is it set in your options?
in color.less on line 122, column 1:

121// ant-design/ant-motion#44
122.bezierEasingMixin();
123`

why getting this?

in browser

callExtract: undefined callLine: NaN column: 0 extract: (3) ["// https://github.com/ant-design/ant-motion/issues/44", ".bezierEasingMixin();", ""] filename: "http://localhost:3000/color.less" href: "http://localhost:3000/color.less" index: 4144 line: 122 message: "Inline JavaScript is not enabled. Is it set in your options?" stack: undefined type: "Syntax"

creating some side effects with other library

when i reload my app some functions will stop to work like react-custom-scrollbar. when i remove

from index.htmt they will work perfectly but update color theme will stop working.

here is my webpack.config.js file
`'use strict';

/**

• Webpack Config
  */
  const fs = require('fs');
  const path = require('path');
  // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

// Webpack uses publicPath to determine where the app is being served from.
// In development, we always serve from the root. This makes config easier.
const publicPath = '/';

// Make sure any symlinks in the project folder are resolved:

// plugins
// const webpack = require('webpack');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const AntDesignThemePlugin = require('antd-theme-webpack-plugin');

const options = {
antDir: path.join(__dirname, './node_modules/antd'),
stylesDir: path.join(__dirname, './src/styles'),
varFile: path.join(__dirname, './src/styles/global/variables.less'),
mainLessFile: path.join(__dirname, './src/styles/styles.less'),
themeVariables: [
'@primary-color',
'@secondary-color',
'@heading-color',
'@text-color',
'@text-color-secondary',
'@layout-header-background',
'@layout-footer-background',
'@body-background'
],
indexFileName: 'public/index.html',
};

const themePlugin = new AntDesignThemePlugin(options);

// the path(s) that should be cleaned
let pathsToClean = [
'dist',
'build'
];

// the clean options to use
let cleanOptions = {
root: __dirname,
verbose: false, // Write logs to console.
dry: false
};

const ROOT = path.resolve(__dirname, './');

function root(args) {
args = Array.prototype.slice.call(arguments, 0);
return path.join.apply(path, [ROOT].concat(args));
}
module.exports = {
entry: ["babel-polyfill", "./src/index.js"],
output: {
// The build folder.
path: path.resolve(__dirname, 'dist'),
// Generated JS file names (with nested folders).
// There will be one main bundle, and one file per asynchronous chunk.
// We don't currently advertise code splitting but Webpack supports it.
filename: 'assets/[name].[hash:8].js',
chunkFilename: 'assets/[name].[hash:8].chunk.js',
// We inferred the "public path" (such as / or /my-project) from homepage.
publicPath: publicPath,
},
cache: true,
devtool: "source-map", // enum // enhance debugging by adding meta info for the browser devtools
// source-map most detailed at the expense of build speed.
context: __dirname, // string (absolute path!)
// the home directory for webpack
// the entry and module.rules.loader option
// is resolved relative to this directory
target: "web", // enum

devServer: {
contentBase: './src/index.js', // boolean | string | array, static file location
port: 3000,
hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin
historyApiFallback: true, // true for index.html upon 404, object for multiple paths
},
module: {
rules: [
{
enforce: 'pre',
test: /.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react', 'stage-2']
}
},
{
test: /.html$/,
use: [
{
loader: "html-loader",
options: {minimize: true}
}
]
},
{
test: /.css$/,
use: ["style-loader", MiniCssExtractPlugin.loader, "css-loader"]
},
{
test: /.(png|jpg|jpeg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
name: 'images/[name].[hash:8].[ext]'
}
}
]
},
{
test: /.(woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000'
},
{
test: /.less$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader"
},
{
loader: "less-loader"
}
]
}, {
test: /.js?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
extends: path.join(__dirname, './.babelrc'),
cacheDirectory: true
}
}
}
]
},
// resolve alias (Absolute paths)
resolve: {
alias: {
actions: path.resolve(__dirname, 'src/actions/'),
appRedux: path.resolve(__dirname, 'src/appRedux/'),
assets: path.resolve(__dirname, 'src/assets/'),
components: path.resolve(__dirname, 'src/components/'),
constants: path.resolve(__dirname, 'src/constants/'),
container: path.resolve(__dirname, 'src/container/'),
mock: path.resolve(__dirname, 'src/mock/'),
routes: path.resolve(__dirname, 'src/routes/'),
lngProvider: path.resolve(__dirname, 'src/lngProvider/'),
util: path.resolve(__dirname, 'src/util/')
},
extensions: ['.js', '.jsx', '.css', '.png', '.jpg', '.gif', '.jpeg'],
modules: [
path.resolve('./src'),
'node_modules'
]
},
optimization: {
minimizer: [
// we specify a custom UglifyJsPlugin here to get source maps in production
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
compress: false,
ecma: 6,
mangle: true
},
sourceMap: true
})
]
},
plugins: [
themePlugin,
new CopyWebpackPlugin([
{
from: root('src/assets'),
to: root('dist/assets')
}
]),
new CleanWebpackPlugin(pathsToClean, cleanOptions),
new HtmlWebPackPlugin({
template: "./public/index.html",
favicon: './public/favicon.ico',
filename: "index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "static/css/[name].[hash:8].css"
})
]
};
.babelrc{
"presets": [
[
"es2015",
{
"modules": false
}
],
"react",
"stage-2"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": "css"
}
],
"transform-runtime"
]
}
`
index.html

`

<script> window.less = { async: false, env: 'production' }; </script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>

`

please help me to solve this issue

color.less file not found in production (404)

In production, app cannot find any color.less file (https://mysite.com/color.less 404) but in development there is no problem, everything works fine.
Is there any idea why this is happening.

Show your code

const AntDesignThemePlugin = require('antd-theme-webpack-plugin');
const { getLessVars } = require('antd-theme-generator');
const defaultVars = getLessVars(path.join(__dirname, './path/defaultVars.less'));
const options = {
  antDir: path.join(__dirname, './node_modules/antd'),
  stylesDir: path.join(__dirname, './path'),
  varFile: path.join(__dirname, './path/defaultVars.less'),
  themeVariables: Object.keys(defaultVars),
  generateOnce: false, // generate color.less on each compilation
};
const plugin = new AntDesignThemePlugin(options);

mule.exports = function (config, env) {
  const newConfig = Object.assign(config, override(
    addDecoratorsLegacy(),
    fixBabelImports('import', {
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: true
    }),
    addLessLoader({
      javascriptEnabled: true,
      modifyVars: defaultVars
    }),
  
    addWebpackPlugin(plugin),

    )(config, env)
  );


  newConfig.devtool= 'source-map';

  return newConfig;
};

Version
"antd-theme-generator": "^1.2.4",
"antd-theme-webpack-plugin": "^1.3.6",
"less": "2.7.2",
"antd": "^4.2.0",

W3 Error

Describe the bug
The implementation of color.less causes an error in the W3 validator. Exists solution to remove error from W3 Validator?

Show your code
Code added to index.html

<body>
      <link rel="stylesheet/less" href="/color.less" />
    <script>
      window.less = {
        async: false,
        env: 'production'
      };
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>

Error:

Error: A link element must not appear as a descendant of a body element unless the link element has an itemprop attribute or has a rel attribute whose value contains dns-prefetch, modulepreload, pingback, preconnect, prefetch, preload, prerender, or stylesheet.

Version
antd-theme-webpack-plugin: 1.2.0

error evaluating function `ceil`: argument must be a number

Describe the bug

切换主体并没有改变样式，并且color.less是一个空白文件

Show your code
const paletteLess = fs.readFileSync('./src/common/style/variable.less', 'utf8');
const variables = lessToJs(paletteLess);
exports.antdTheme = (options = {
antDir: path.join(__dirname, './node_modules/antd'),
stylesDir: path.join(__dirname, './src/common/style'),
varFile: path.join(__dirname, './src/common/style/variable.less'),
themeVariables: Object.keys(variables),
indexFileName: 'index.html',
generateOnce: false
}) => ({
plugins: [new AntDesignThemePlugin(options)],
});

variable.less文件
`@import '~antd/lib/style/themes/default.less';

@primary-color: #1890ff; // primary color for all components

@link-color: #1890ff; // link color

@success-color: #52c41a; // success state color

@warning-color: #faad14; // warning state color

@error-color: #f5222d; // error state color

@font-size-base: 14px; // major text font size

@heading-color: rgba(0, 0, 0, 0.85); // heading text color`

window.less.modifyVars({'@primary-color': '#333'}).then(res => { console.log('切换成功'); });

Screenshots

Version
"react": "16.8.6",
"antd": "3.26.16",
"antd-theme-webpack-plugin": "^1.3.6",
"less-vars-to-js": "^1.3.0",

Plugin causes less mixin syntax compilation error 插件导致 less mixin 语法编译报错

.a,
#b {
  color: red;
}

.mixin-class {
  .a();
}

.mixin-id {
  #b();
}

相关issue：ant-design/ant-design-pro#3335

Implementation with webpacker for rails

The configuration and examples provided are very much dependent on the create-react-app structure of files, and having a styles dir, index.html, etc.

I'm building a Rails App, which uses webpacker (which is basically a wrapper around the webpack runner). However, I'm not sure how to set up the options to be able to use this plugin.

Do you have any instructions/insight on how to implement this with rails webpacker?

changing non color variables dynamically

Hi,
So I am trying to create a new theme that can be changed at runtime. I believe I have it working as I am able to change @primary-color at runtime, so that is all good. Although I can not change other variables such as @card-radius.

Does this library only support color variables? Is there a way around this?

How I am changing the variables:

window.less.modifyVars({ '@primary-color': 'green', '@card-radius': '1rem' })

variable @component-background3cf is undefined

When I use variable primary-color, it did work. But I add variable @component-background into the themeVariables, it doesn't work and it reported this error. Why is it so？

using custom variables

Hello, is there a way to use custom variables and not only variables coming from ant template?

Also, if i open the color.less file, i see that the code inside mainLessFile is repeted twice, how?

Thanks,

Claudio

Can it be used in vant？

Describe the bug
Can it be used in vant？Because I feel the directory structure is very similar.

Show your code
reference resources： https://www.jianshu.com/p/a42f58fc3f92

Screenshots

Version
vant 2.9.0

empty color.less

Describe the bug
color.less file is empty

Show your code
webpack.config

const paletteLess = fs.readFileSync('./src/ui/variables.less', 'utf8');
const variables = lessToJs(paletteLess);
const options = {
    antDir: path.join(__dirname, './node_modules/antd'),
    stylesDir: path.join(__dirname, './src/ui/styles'),
    varFile: path.join(__dirname, './src/ui/variables.less'),
    indexFileName: false,
    themeVariables: Object.keys(variables),
};

const themePlugin = new AntDesignThemePlugin(options);

variables.less

@import '~antd/lib/style/themes/default.less';
@primary-color: #1890ff; // primary color for all components
@link-color: #1890ff; // link color
@success-color: #52c41a; // success state color
@warning-color: #faad14; // warning state color
@error-color: #f5222d; // error state color
@font-size-base: 14px; // major text font size
@heading-color: rgba(0, 0, 0, 0.85); // heading text color

The above worked fine with ant 3.x. I don't know if it's because I moved to 4.x

The issues is when webpack compiling the code, it complaints about ceil function that first arg must be number.
@font-size-base soimetimes is random color code, like #405e3f. I don't know why. But @font-size-base: 14px; is defined in the variables.

@heading-1-size: ceil(@font-size-base * 2.71);
@heading-2-size: ceil(@font-size-base * 2.14);
@heading-3-size: ceil(@font-size-base * 1.71);
@heading-4-size: ceil(@font-size-base * 1.42);

Screenshots

Version
ant: 4.5.4
antd-theme-webpack-plugin: 1.3.6

I cant find the version 1.1.5

I can't find the version 1.1.5 from npm or yarn.
I need u help.

$ npm i antd-theme-webpack-plugin@latest  --save
npm ERR! code ETARGET
npm ERR! notarget No matching version found for antd-theme-webpack-plugin@^1.1.5
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

I find all versions on npm:

$ npm view  antd-theme-webpack-plugin versions

[ '1.0.0',
  '1.0.1',
  '1.0.2',
  '1.0.3',
  '1.0.4',
  '1.0.5',
  '1.0.6',
  '1.0.7',
  '1.0.8',
  '1.0.9',
  '1.1.0',
  '1.1.1',
  '1.1.2' ]

can't yarn serve

项目卡在 95% emitting AntDesignThemePlugin ，启不起来，而且装完 antd-theme-webpack-plugin 依赖后，导致 vue-i18n 用不了，请问有遇到过类似问题吗

Can not use the @menu-dark-arrow-color theme variable

When i add the @menu-dark-arrow-color variable to the themeVariables array i get an error in the console: "variable @menu-dark-arrow-color0f6 is undefined".

// webpack.config.js
themeVariables: [
    '@primary-color',
    '@text-color',
    '@success-color',
    '@warning-color',
    '@error-color',
    '@font-size-base',
    '@heading-color',
    '@text-color-secondary',
    '@disabled-color',
    '@border-radius-base',
    '@border-color-base',
    '@box-shadow-base',
    '@layout-trigger-background',
    '@layout-sider-background',
    '@menu-dark-bg',
    '@menu-dark-color',
    '@menu-dark-arrow-color' // Everything works but this one
  ],

I have looked in the color.less file where the error happened and saw:

/* color.less */
.ant-tag-pink {
  color: #eb2f96;
  background: @menu-dark-arrow-color0f6;
  border-color: #ffadd2;
}

I don't understand why but i think that when the colors.less file is evaluated the variable has not yet been defined.

can not change @layout-header-height ?

Starting the development server...

使用customize-cra时addWebpackPlugin(new AntDesignThemePlugin(options))方法在npm start后一直卡在Starting the development server...之中，既不报错也跑不起来

Webpack building will be terminated

System Version: Windows 10 10.0.17134
Problem: Webpack building will be terminated
(May Be) Reasons:
Sometimes,the callback function of compiler.plugin doesnt be executed. (its doesnt work in the Promise).webpack building will be terminated.

build failing with generateOnce: true

Related: ant-design/ant-design-pro#2891

Build with generateOnce: true will fail with this message:
(node:83568) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'colors' of undefined

There is a typo here: @ant-design-pro https://github.com/ant-design/ant-design-pro/blob/master/config/plugin.config.js#L28

- generateOne
+ generateOnce

but is failing to build with this option.

antd text color can not be changed

I use this plugin for dynamic theme changing;

Most styles work well, except text color

As you see, there are two classes of elements. The original styles override my styles. How can I fix that.

its passible change font pass 18px and no color? its didn't work for me

Word misspelling

Path: examples/antd-init/styles/variables.less

@secondry-color => @secondary-color

Used in antdv, got some wrong styles

Describe the bug
Used in antdv, but got some wrong styles in the color.less. I don't know where it comes from, although I have checked the various style files.

Show your code

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

const options = {
  antDir: path.join(__dirname, "../../node_modules/ant-design-vue"), //antd包位置
  stylesDir: path.join(__dirname, "../../src/styles"), //主题文件所在文件夹
  varFile: path.join(__dirname, "../../src/styles/variables.less"), // 自定义默认的主题色
  mainLessFile: path.join(__dirname, "../../src/styles/index.less"), // 项目中其他自定义的样式（如果不需要动态修改其他样式，该文件可以为空）
  outputFilePath: path.join(__dirname, "../../public/color.less"), //提取的less文件输出到什么地方
  themeVariables: ["@primary-color","@hover-color"], //要改变的主题变量
  indexFileName: "../../public/index.html", // index.html所在位置
  generateOnce: false // 是否只生成一次（if you don't want to generate color.less on each chnage in code to make build process fast in development mode, assign it true value. But if you have new changes in your styles, you need to re-run your build process npm start.）
}

const createThemeColorReplacerPlugin = () => new AntDesignThemePlugin(options)

module.exports = createThemeColorReplacerPlugin

vue.config.js

const createThemeColorReplacerPlugin = require('./script/themeConfig/plugin.config')
module.exports = {
  lintOnSave:false,
  productionSourceMap: false,
  configureWebpack: {
    // webpack plugins
    plugins: [
      createThemeColorReplacerPlugin()
    ],
  },
  css: {
    sourceMap: true,
    loaderOptions: {
      less: {
        javascriptEnabled: true,
        //定制antd 
        modifyVars: {
           //'primary-color': $color,
          // 'link-color': $color,
          'border-radius-base': '2px',
          'font-size-base': '12px',
          'menu-collapsed-width': '60px',
          'tabs-card-height': '35px',
          'carousel-dot-width': '30px',
          'carousel-dot-height': '6px'
        }
      },
      sass: {} //可以使用sass 为了统一风格都是用less
    }
  },
}

Screenshots
Right Style should be like this:

Wrong style like this:

the style code border: 0 solid #aaa; caused this problem!

Version
"antd-theme-webpack-plugin": "^1.3.0",
"ant-design-vue": "1.6.2",

Create React App Example not working

Describe the bug
Example in create react app is not working with npm or yarn.

Show your code
No code changes done

Screenshots
callExtract: undefined callLine: NaN column: 32 extract: Array(3) 0: "@link-color : @primary-color;" 1: "@link-hover-color : color(~colorPalette("@{link-color}", 5));" 2: "@link-active-color : color(~colorPalette("@{link-color}", 7));" length: 3 __proto__: Array(0) filename: "http://localhost:3000/color.less" href: "http://localhost:3000/color.less" index: 141741 line: 1567 message: "variable @link-color is undefined" stack: undefined type: "Name" __proto__: Error

Version

I saw that You have updated the customize-cra example 4 months back. Can you please look into create-react-app ? or at least point the changes that I need to do.

background-image 的地址被覆盖

demo地址

问题描述

在less文件中，同时使用 background-image 和 background-color 属性，在 background-image 中使用 antd 变量，background-image 的地址被改写。

插件配置

const path = require('path');
const {
  override,
  fixBabelImports,
  addLessLoader,
  addBabelPlugins,
  addWebpackPlugin,
} = require('customize-cra');
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/variables.less'),
  mainLessFile: path.join(__dirname, './src/style.less'),
  themeVariables: ['@primary-color'],
  indexFileName: 'index.html',
  generateOnce: false, // generate color.less on each compilation
};

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    // modifyVars: {
    //   '@primary-color': '#00375B',
    // },
    javascriptEnabled: true,
  }),
  addWebpackPlugin(new AntDesignThemePlugin(options)),
);

问题截图

期望结果

实际结果

how to change dark theme?

I don't understand your demo's code haha .

Changing some variables affects others as well

Hi! When i'm change variable @label-color, for example, @heading-color changes as well, but in the library (antd) code they are related like this @label-color: @heading-color;.

Webpack plugin config

Code, that changes variables

Missing file location settings for color.less

hi fantastic plugin!!!!
i build my Multi Project Starter framework for build multiple projects that share same code and basic webpack configuration.
multiprojectstarter
and cant find way tell to antd-theme-webpack-plugin put color.less file not to root else to specific folder location and i have .
to /dist/starterProject/color.less

can not use in antd-design-mobile

RT:

  Error { [Error: JavaScript evaluation error: 'ReferenceError: colorPalette is not defined']
  message:'JavaScript evaluation error: \'ReferenceError: colorPalette is not defined\'',
  stack: undefined,
  type: 'Syntax',
  filename: 'input',
  index: 124170,
  line: 5808,
  column: 32,
  callLine: NaN,
  callExtract: undefined,
  extract:
   [ '',
     '.brand-primary-7 { color: color(~`colorPalette("@{brand-primary}", 7)`); }',
     ' .brand-primary-5 { color: color(~`colorPalette("@{brand-primary}", 5)`); }' ] }