Implementation with webpacker for rails about antd-theme-webpack-plugin

[mzohaibqc]

@vsai You can simply use core script to generate color.less file which will be imported in main html file.
https://github.com/mzohaibqc/antd-theme-generator

[vsai]

I'm not sure I get exactly what you mean.
With antd-theme-generator you don't need to integrate with webpack?

The main concern I had was regarding the options:

const options = {
  antDir: path.join(__dirname, './node_modules/antd'),
  stylesDir: path.join(__dirname, './src/styles'),
  varFile: path.join(__dirname, './src/styles/variables.less'), // default path is Ant Design default.less file
  mainLessFile: path.join(__dirname, './src/styles/index.less'),
  themeVariables: ['@primary-color'],
  outputFilePath: path.join(__dirname, './public/color.less') // if provided, file will be created with generated less/styles
}

In my case, stylesDir, varFile, mainLessFile don't exist. Webpack can compile and output a css file to public/packs/ directory (for rails project). And there is a manifest.json object that handles the mapping of filename to filename-<hash> in the directory.

Sorry for the confusion. I'm just not clear how to extend the library for the rails+webpacker implementation that I have right now.

[mzohaibqc]

@vsai here are my assumptions.

• You are using React with Ant Design as a component library
• You are bundling you javascript/react code using webpacker.
• There must be some node_modules folder that provides dependencies for your project like antd.
• There must be a folder containing your styles

You need to provide configurations for this script which contains

• antDir: an absolute path to ant design node_module directory
• stylesDir: absolute path to your styles directory containing .less files
• varFile: absolute path to your less variables files, it must include/inherit ant design default variables.
• mainLessFile: Your main/index less file that imports other styles for your app
• themeVariables: list of variable names that you want to change in browser, e.g. ['@primary-color'],
• outputFilePath: absolute path to where this color.ess file should be saved, e.g. path.join(__dirname, './public/packs/color.less')

First thing is to go through README file and read all the instructions, RTFM :)
https://github.com/mzohaibqc/antd-theme-generator

[mzohaibqc]

@vsai Have you been able to resolve your issue?

[vsai]

Yes. Thanks