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?

Heretic Monkey
– Heretic Monkey

2019-04-08 16:39:36 +00:00
Commented Apr 8, 2019 at 16:39 — Heretic Monkey
– Heretic Monkey, Commented Apr 8, 2019 at 16:39

Yazan Mehrez · Accepted Answer · 2019-04-10 10:37:42Z

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, 2019 at 10:37

Yazan Mehrez

1,2142 gold badges11 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

testing Over a year ago

I'd to put it into my component, but that seems to work!

Rohinibabu · Accepted Answer · 2020-09-09 09:42:30Z

0

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/[email protected]/ie11CustomProperties.min.js"><\x2fscript>');</script>

answered Sep 9, 2020 at 9:42

Rohinibabu

68811 silver badges16 bronze badges

Collectives™ on Stack Overflow

Working with var css in internet explorer using Angular 7

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related