How to use with ant-design?

[itayganor]

Hey,

The plugin works great, but I couldn't get it to work with ant-design.

Here's a reproduction of the issue.

I configured the loader to read variable overrides from a file

loader: 'less-loader',
options: {
    lessOptions: {
        javascriptEnabled: true,
        modifyVars: {
            hack: `true; @import '${path.join(__dirname, './src/theme/antdOverrides.less')}'`,
        },
    },
},

In that file:

@import './palette.less';

@primary-color: @primary;
// @text-color: @text-color; // implicit from palette

// ... all other antd variables

Then I ran the build script (npm run build-dev) and searched for primary color usages.

As you can see, both themes uses the primary color from demo-dark.

I couldn't find any test case related to antd, so I'm opening this issue.

Thanks! <3

[githoniel]

1. use modularized antd

I am using my fork version of antd v3, you must use babel-plugin-import to import less file or import antd less manually to make antd customize theme work , the same for v4.

https://3x.ant.design/docs/react/introduce#Use-modularized-antd

you should add

["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "true" }]

to your babelrc

2. modify your webpack config

• do not only use babel-loader for js/jsx file, it will result in babel-plugin-import not working on tsx/ts
• modifyVars in less loader is not needed, this plugin will append theme file to every less/sass file and will override modifyVars options
• do not import/require theme file in you project, you shoud remove @import 'themes/demo-dark.less'; from client\src\theme\palette.less

3. antd less variables no right

@primary should be @primary-color

4. you may use this https://www.npmjs.com/package/webpack-theme-set to load style file, it's using internal in my project so readme is too simple, i will add translate later

import themeSetter from 'webpack-theme-set'
// inital set Theme
themeSetter.setTheme('light', {
  prefix: 'main-'
}).then(() => {
   ReactDOM.render(.....)
})
// switch Theme
themeSetter.setTheme('light')

[itayganor]

A note regarding the third bullet of 2. :

I import the palette.less file for variable-autocompletion in the code. Otherwise, all variables are marked with a curvy underline that looks like an error (using WebStorm). Is there an other way to get autocompletion?

[githoniel]

maybe import a palette-default.less file and then use theme file to override variable?