Working with var css in internet explorer using Angular 7

Question

Css variable working fine with chrome but not in IE, I'm trying to do this:

:root {
    --primary-color: #015a82;
    --background-color: #015a82;
    --text-color: #fff;
    --secondary-color: #6d6d6d;
}

body {
color: var(--primary-color);
}

But it is not supported in Internet Explorer, I tried to implement postcss-loader but it seems like not compatible with Angular 7, any ideas?

Possible duplicate of [Workaround for CSS variables in IE?](https://stackoverflow.com/questions/45955538/workaround-for-css-variables-in-ie) — Heretic Monkey, Apr 08 '19 at 16:39

score 2 · Accepted Answer · answered Apr 10 '19 at 10:37

2

The solution was very simple.

1- npm i css-vars-ponyfill --save.

2- in app.component.ts you have to do this:

import cssVars from 'css-vars-ponyfill';


constructor() {... }

ngOnInit() {
    cssVars();
    ...
    ...
}

answered Apr 10 '19 at 10:37

Yazan Mehrez

1,174
2
10
23

I'd to put it into my component, but that seems to work! – testing Jan 31 '20 at 12:54
Great. Thank you! – Igor Janković May 11 '20 at 19:37

score 0 · Answer 2 · answered Sep 09 '20 at 09:42

Just appended the below script in index html head tag and it's working

<script>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js"><\x2fscript>');</script>

Working with var css in internet explorer using Angular 7

2 Answers2