Component style issues

[chenshuai2144]

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

[mzohaibqc]

@chenshuai2144 Sure, I will reach you around 11pm GMT + 5. (Pakistan time)

[mzohaibqc]

@chenshuai2144 Are you using antd-tools for build process or simple webpack?

[mzohaibqc]

Can you push your local changes for theming to remote branch so I can clone them and see what's wrong

[chenshuai2144]

I use roadhog and I think it may be because css-module.

you can see my code in the v2 branch

[mzohaibqc]

@chenshuai2144 I ran your code locally so can you specifically tell me what is the issue. Which component do you expect to change color but it's not changing.

Few things to clear,
In order to use this plugin, all less files should be imported in main less file like this and you need to specify which colors you want to update. Currently you are updating only @primary-color

@import './components/ActiveChart/index.less';
@import './components/Charts/ChartCard/index.less';
@import './components/Charts/Field/index.less';
@import './components/Charts/MiniProgress/index.less';
@import './components/Charts/Pie/index.less';
@import './components/Charts/Radar/index.less';
...
...

Have a look at this diff https://github.com/ant-design/ant-design-pro/compare/v2...mzohaibqc:theme?expand=1

[chenshuai2144]

Is this a good method for components that need to be released separately?

[mzohaibqc]

@chenshuai2144 Do you have a google account so we can communicate on Hangout or chat?

[chenshuai2144]

chenshuai064@gmail.com

[chenshuai2144]

I solved this problem, but css-moudle made me feel

[mzohaibqc]

@chenshuai2144 Can you share your findings and solution with me.

[chenshuai2144]

I want to add a tool that handles css-moudle.
what should I do?

[mzohaibqc]

@chenshuai2144 Which tool and how it will affect? I am at leave and don't have my laptop with me so I'll look into this after June 20.

[chenshuai2144]

look this ant-design/ant-design-pro#1662

[chenshuai2144]

i need a api getLocalIdent.
Functions similar to css-moudle getLocalIdent

[mzohaibqc]

@chenshuai2144 Did it work after this change ant-design/ant-design-pro@8e4e7d7 ?

[chenshuai2144]

no ,Because css-module。
I need getLocalIdent to customize the class name

[mzohaibqc]

@chenshuai2144 I don't know what is getLocalIdent but if there is something that I can change to make it work, let me know

[chenshuai2144]

 getLocalIdent: (context, localIdentName, localName) => {
      if (context.resourcePath.includes('node_modules')) {
        return localName;
      }

      let antdProPath = context.resourcePath.match(/src(.*)/)[1].replace('.less', '');
      if (context.resourcePath.includes('components')) {
        antdProPath = antdProPath.replace('components/', '');
      }
      const arr = antdProPath
        .split('/')
        .map(a => a.replace(/([A-Z])/g, '-$1'))
        .map(a => a.toLowerCase());
      return `antd-pro${arr.join('-')}-${localName}`.replace('--', '-');
    },

[chenshuai2144]

I hope that you can use this method to change the css classname before converting less.

[chenshuai2144]

in base.less

.main {
  width: 100%;
  height: 100%;
  min-height: 100%;
  transition: 0.3s;
  &.wide {
    max-width: 1200px;
    margin: 0 auto;
  }
}

change to

{
.antd-pro-base-main {
  width: 100%;
  height: 100%;
  min-height: 100%;
  transition: 0.3s;
  &.antd-pro-base-wide {
    max-width: 1200px;
    margin: 0 auto;
  }
}
}

[mzohaibqc]

@chenshuai2144 thank you so much for sharing this. I will look into this and will add in new release..

[chenshuai2144]

I have solved