React Create Application production build and CSS variables in IE11

Question

I would like to know how to get rid of CSS variables in a production build. The fact is that I need to build a project for IE11 in which CSS variables are not supported. My project was created using React Create App and I can't do npm run eject. How can you set up a production build so that in the initial heart rate of the style, instead of variables, there would be their values?

Don't offer css-vars-ponyfill, it takes a very long time to load a page in IE11.

Answer 1

The only way to make CSS variables work in IE is using a polyfill. If you don't want to use css-vars-ponyfill, you can try ie11CustomProperties or css-variables-polyfill.

If you don't want to use a polyfill, I think you can only edit the CSS styles manually to add CSS fallbacks to support IE11. Something like this:

body {
  --text-color: red;
}
body {
  color: red;
  color: var(--text-color);
}