3

I've a written a webpack plugin which reads less source files and then after processing generates a short css which allows to override the color specific styles in browser using less.modifyVars(). Here is a demo https://antd-live-theme.firebaseapp.com/

But problem is that it does not work with css-modules since class names generated after compilation will be different than what are in those files. So I think it's better to process the generated css by webpack (css, less, style loaders) in my webpack plugin. so question is

How to get that generated css in webpack plugin even in dev mode using where style-loader is being used?

Here is plugin https://github.com/mzohaibqc/antd-theme-webpack-plugin/blob/master/index.js

Any ideas to accomplish this task are welcome. Let me know if there is something confusing.

Thanks in advance :)

DesTroy
  • 390
  • 4
  • 17
Zohaib Ijaz
  • 21,926
  • 7
  • 38
  • 60

1 Answers1

0

If I understood correctly, you need to extract css class names to be used in your plugin.

While it's not recommended to run this on frontend webpack config, you can try to hack your way with babel-plugin-css-modules-transform (which is based on css-modules-require-hook).

This is meant to be used to render css modules on the server.

yotke
  • 1,170
  • 2
  • 12
  • 26