CODEWITHSUNDEEP
csstypescriptangular7
User128
User128

Reputation: 1

How to load CSS file dynamically by taking css file path from backend only?

I have to load css according to some parameters, that come from backend. If RoleID is 1 then I want to load role1.scss and for RoleID is 2 then I want to load role2.scss. Here i'm taking css files path from backend.This selected css should apply to the whole application.

In component I have written this.document.getElementById('theme').setAttribute('href', this.cssLink ); this.cssLink is the path of css file taken from backend

In my index.html

<link id="theme" href="styles.scss">

I have also tried

 require('style-loader!' + this.cssLink);

It gives error: Error: Cannot find module 'style-loader!src/app/role1.scss'

Upvotes: 0

Views: 709

Answers (1)

kumaran
kumaran

Reputation: 366

Try this one

function loadcssfile(filename) {
    var fileref = document.createElement("link")
    fileref.setAttribute("rel", "stylesheet")
    fileref.setAttribute("type", "text/css")
    fileref.setAttribute("href", filename)
    document.getElementsByTagName("head")[0].appendChild(fileref)
}

loadcssfile("here your css file path", "css");

Upvotes: 1

Related Questions