empty color.less

[popmanhe]

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

[mzohaibqc]

@popmanhe Just use color based variables in your variables.less file or create another one like colors.less or theme.less and then read variables from there

[mzohaibqc]

I tried adding @font-size-base: 14px; in my variables file in working example so when I restarted server, it did not work. So again, as I mentioned in above comment, use separate file for color based variables

[jaryway]

it seems that adding @import "~antd/es/style/themes/default.less" in variables.less file will cause this problem. when i comments i, every thing is fine.

variables.less

// @import "~antd/es/style/themes/default.less";

...

it work for me!

by the way,

The official demo also have this problem, delete the lock file and reinstall, you will see!

[mzohaibqc]

So everything is working fine now?

[SinHide]

Similar configuration is also appear this issue.

[wangxiaocuo]

I also had this problem.