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.
- 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
variables.scss
- Write a
ant.less
file which imports the Ant less-styles and your sass-variables (yes) - Tell
webpack
to load less files via less-loader - Tell webpack to rewrite sass-files which are imported from less-files ($something -> @something)
- Import
ant.less
in 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.
Authors: Kruemelkatze, mrukas
It looks like the sass-loader is not correctly called by the less-loader when processing the sass file. I had a look at the less-loade changelog for any obvious breaking changes but didn't see anything.
Do you still have this rule in your webpack config? Asking just in case if it got removed unintentionally when upgrading your project. :-)
Any idea on this @mrukas?