Theming Ant Design with Sass and Webpack
This is a solution on how to theme/customize Ant Design (which is written in Less) with Sass and webpack. Ant itself offers two solutions and a related article on theming, but these are only applicable if you use Less, the antd-init boilerplate or dva-cli.
What this solution offers:
- use a single sass-file to customize (no duplicate variables for your project and Ant)
- hot reload compatibility
- no dependencies on outdated npm modules
- easy integration with your existing webpack setup (webpack 3+ tested)
- all ant-styles are imported
According to our observations this does not have that much impact in practice, as using only a couple of Ant components will already result in most styles being loaded.
The main procedure is as follows:
- Define your variables in
- Write a
ant.lessfile which imports the Ant less-styles and your sass-variables (yes)
webpackto load less files via less-loader
- Tell webpack to rewrite sass-files which are imported from less-files ($something -> @something)
ant.lessin your project.
Apply the changes / create the files as shown below. The changes should be self-explanatory. Just keep in mind, that your exact webpack-setup may differ a bit from the one given below.