newswim/styleguidist-ant-design

Add install instructions to readme

lapinell opened this issue · 1 comments

How did you get ant design to work with styleguidist?

Hey @lapinell,

Funny enough, the process for both is nearly the same. Since this project uses CRA, and since CRA defines its own webpack config (and doesn't give you access), you need some way to override it. Ant Design has some good documentation on how to do this, and uses a library called React-App-Rewired to modify the webpack config, along with a few other add-ons like .less support.

From what I can tell, Ant Design and Styleguidist care about and search for the name of a particular override file. These should be located in the root of the project. This is effectively the "secret sauce" of this setup.

Library File
Ant Design ./config-overrides.js
Styleguidist ./styleguide.config.js

Oh! Also you need both files since Styleguidist is a separate Node process, and can run at the same time as your app. Also I included a theme.js file which is used to override AntD's less variables (a nice way to avoid duplicating style rules).

I like the benefits of CRA, so the bit of additional "rewiring" was worth it, but alternatively you could just use webpack. In fact, I (or someone) should probably make a starter project that does just that.. 🤔