Hot reload not working for less styles

[stephenasamoah]

I created an about.styles.less in the components folder and imported them into the About.tsx component. However, styles written in the less file are not hot-reloaded; they only update when the page is refreshed.

Also, how do you theme this? I've tried the modifyVars suggestion from https://ant.design/docs/react/customize-theme#Customize-in-webpack

but it just doesn't work.

[chunliu]

Thanks for raising the issue, @stephenasamoah.

The problem is actually caused by MiniCssExtractPlugin: https://webpack.js.org/plugins/mini-css-extract-plugin/#hot-module-reloading-hmr

I updated the webpack config, but seemed it still had problem with less. Then I realized I might not even need less anymore. So I completely removed less, and then the hot reload for css seemed working.

Hope it works for you. If you have to use less, you might have to figure out how to make it work with MiniCssExtractPlugin. I'd appreciate it if you can update here when you figure it out. Thanks.