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

[Roman Gutkin]

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.

[Zohaib Ijaz]

@romangutkin No, this is beacuase there is no such variable @menu-dark-arrow-color0f6. This some bug which is adding this extra 0f6 at the end of @menu-dark-arrow-color variable.

Is this .ant-tag-pink your custom css class?

[Roman Gutkin]

@mzohaibqc Thanks for replying! I think that once i defined the @menu-dark-arrow-color as a dynamic less variable in my webpack config (using antd-theme-webpack-plugin) then it cant be parsed when the color.less file is being created. .ant-tag-pink is not my custom css class, i believe it is being generated by antd.

[Benjamin GIRAUD]

Same with "@btn-primary-color"

[Benjamin GIRAUD]

#4 fixed the problem for me

[sli]

I'm having this issue with the same variable from #4 (@component-background), but I don't see a fix in that issue. I'm not using pure white or pure black anywhere, it's defined in variables.less, and it's listed in my rescripts config for use with react-app-rewire-antd-theme. The other variables I've configured are working, it's just that one that fails.

[sli]

I figured out what's happening.

If any of your custom colors start with a SUBSET of an already-defined color, this bug will trigger. That means none of your custom colors can start with #000 or #fff because those are already in use. So the tip to make a minor change to get around it (like using #fffffe) does not fix the problem, as that color value also triggered the bug. Changing the color value to #efffff made the variable start working.

This bug does not trigger when using window.less.modifyVars to switch themes, only on the initial colors defined in variables.less.

This is a major limitation.

[Zohaib Ijaz]

@romangutkin @sli @benjamingiraud Thanks for reporting this issue. I know it's too late but I hope it will help you or at least others to avoid this issue. I've fixed and published a new version of this plugin

antd-theme-webpack-plugin@1.2.1

Or if someone is using core script it is antd-theme-generator@1.1.7

[姚观寿]

So I can't use windo.less.modifyvars () to dynamically update my custom styles.
Because static style
Wiki - the title {
Color: red;
}.

covers
The wiki - the title {
Color: @ wiki - the title - color;
}
Dynamic style,

This is the antd-theme-webpack-plugin bug

[姚观寿]

So I can't use windo.less.modifyvars () to dynamically update my custom styles.
Because static style
Wiki - the title {
Color: red;
}.

covers
The wiki - the title {
Color: @ wiki - the title - color;
}
Dynamic style,

This is the antd-theme-webpack-plugin bug

[Zohaib Ijaz]

@qq281113270 I'll be happy to help you but first you need to explain it well, what's the bug. Read your own comment and see if it makes sense or not. e.g.

The wiki - the title {
Color: @ wiki - the title - color;
}

Is neither a valid css nor a text that conveys something.

So kindly explain bit more.

As for as custom variable is concerned, it works, see the example. https://github.com/mzohaibqc/antd-theme-webpack-plugin/blob/master/examples/create-react-app/src/App.js

@secondary-color is a custom variable and not part of antd variables.