using custom variables about antd-theme-webpack-plugin

[mzohaibqc]

Yes, you can , see the example projects. there is a custom variable secondary-color.

[violabg]

it only works on the main less file. If you use a custom variable in an imported file it won't change when the theme changes only default and variables will

[vKongv]

Same, having the same issues here.

This is a gif on the issue that I mentioned:

Snippet of my source codes:

Component.js

import React, { useState, useEffect } from 'react';
import { Row, Col } from 'antd';

import styles from './Component.module.css';
import lessStyles from './Component.module.less';

const primaryColorOptions = ['#00b9c6', '#8930e8'];

const Component = ({ hostName }) => {
  const [primaryColor, setPrimaryColor] = useState(primaryColorOptions[0]);

  useEffect(() => {
    window.less.modifyVars({ '@primary-color': primaryColor });
  }, [primaryColor]);

  return (
    <div className={styles.container}>
      <Row className={styles.footer}>
        <Col>
          <span>{`@ 2020 ${hostName}`}</span>
        </Col>
        <Col>
          <span>Powered by HostPlatform</span>
        </Col>
      </Row>
      <Row className={lessStyles.container}>I am using primary color as background</Row>
      <Row>
        <Col span={24}>
          {primaryColorOptions.map(option => {
            const isSelected = option === primaryColor;
            const style = { backgroundColor: option, ...(isSelected && { borderWidth: '2px' }) };
            return <span onClick={() => setPrimaryColor(option)} className={styles.colorPickerBox} style={style} />;
          })}
        </Col>
      </Row>
    </div>
  );
};

export default Component;

Component.module.less

.container {
  height: 30px;
  width: 100%;
  background-color: @primary-color;
}

I tried using non-module less and it still doesn't work. I am new to LESS so I am not sure what happened.

Hope this help.

[mzohaibqc]

If you want to update the imported variable then simply add that variable in main.less/index.less and assign the default value

[mzohaibqc]

Also this does not work with css-modules

[hanalice]

If you want to update the imported variable then simply add that variable in main.less/index.less and assign the default value

Question1: I define the custom variable '@status-label-success-color' in variables.less files, and import the variables.less into main.less file, and define a class that using the customize variable, it occures the problem:

I can use ant variable like @primary-color, but can't not use customize variable.

Question2: when I add customize varialbes into main.less, it can pass the complier phase, but in the color.less file, I didn't see the custom variables, instead the defiend class using custom variable has been interpreted into css twice,so that customize variables can't be changed in runtime env. Meanwhile, the ant variable workw correctly.

[mzohaibqc]

@hanalice Show me your configuration for plugin

[hanalice]

@hanalice Show me your configuration for plugin

I will show the passed complication code(Question2):
index.less

variables.less

vue.config.js

index.html

[mzohaibqc]

@hanalice you have not declared your variable in variables.less file which is required. All variables that you want to update dynamically must be in your variables.less file which you are passing in plugin options

[hanalice]

@hanalice you have not declared your variable in variables.less file which is required. All variables that you want to update dynamically must be in your variables.less file which you are passing in plugin options

in Question2， I didn't declare custom variables in variables.less, I decalre the custom variables in index.less, which is the mainLess file. In this case, class using custom variables will interpreted into the detail value multiple times, which cann't be changed in runtime.

in Question1, I did declare custom variables in variables.less, but the compliation failed. But now it works well, I don't no why it works.

[vKongv]

If you want to update the imported variable then simply add that variable in main.less/index.less and assign the default value

Yeah I already did that. That's why the antd button is changing color but mine one which is using the custom variable is not changing the color.

Also this does not work with css-modules

I tried without module and it still doesn't work.

I ended up switching to use emotion as a theming solution for my component that is not using AntD.

[mzohaibqc]

Can you try using a hex code instead of rgb()

[mzohaibqc]

@hanalice @vKongv

All variables that you want to update must be in variables.less file with unique values.
You must provide array of those variable names that you want to update later in plugin configuration under themeVariables: ['@primary-color'] like this.

Here is a demo for Dark/Light theme
https://mzohaibqc.github.io/antd-theme-webpack-plugin/index.html

And here is code for this demo
https://github.com/mzohaibqc/antd-theme-webpack-plugin/tree/master/examples/customize-cra

Note: you don't necessarily need customize-cra package to achieve this. Anything to inject this plugin in webpack configurations.