Implementation with webpacker for rails

[Vishalsai Daswani]

The configuration and examples provided are very much dependent on the create-react-app structure of files, and having a styles dir, index.html, etc.

I'm building a Rails App, which uses webpacker (which is basically a wrapper around the webpack runner). However, I'm not sure how to set up the options to be able to use this plugin.

Do you have any instructions/insight on how to implement this with rails webpacker?

[Zohaib Ijaz]

@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

[Vishalsai Daswani]

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.

[Zohaib Ijaz]

@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

[Zohaib Ijaz]

@vsai Have you been able to resolve your issue?

[Vishalsai Daswani]

Yes. Thanks