Component style issues about antd-theme-webpack-plugin HOT 22 CLOSED

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;
  }
}
}

from antd-theme-webpack-plugin.

@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

from antd-theme-webpack-plugin.

 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('--', '-');
    },

from antd-theme-webpack-plugin.

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

from antd-theme-webpack-plugin.

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

from antd-theme-webpack-plugin.

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

from antd-theme-webpack-plugin.

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

you can see my code in the v2 branch

from antd-theme-webpack-plugin.

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

from antd-theme-webpack-plugin.

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

from antd-theme-webpack-plugin.

[email protected]

from antd-theme-webpack-plugin.

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

from antd-theme-webpack-plugin.

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

from antd-theme-webpack-plugin.

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

from antd-theme-webpack-plugin.

@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.

from antd-theme-webpack-plugin.

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

from antd-theme-webpack-plugin.

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

from antd-theme-webpack-plugin.

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

from antd-theme-webpack-plugin.

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

from antd-theme-webpack-plugin.

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

from antd-theme-webpack-plugin.

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

from antd-theme-webpack-plugin.

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

from antd-theme-webpack-plugin.

I have solved

from antd-theme-webpack-plugin.