VueJS + Webpack + dynamic CSS

Question

how I can dynamicaly load CSS file on VueJS (SPA) application?

Short scenario

Application starts and submit request to backend server for CSS file name by url address
Apllication get response from backend server with css filename params

Then i need call something whats load new CSS file by response data.

We used this for web-site branding (CSS are depends on actual domain - but site is installed on one hosting). This CSS file can be located on our server (/assets/css/xx.css) or on other servers.

Short snippet from Vue component:

loadCssRequest(location.href).then(function(reponse){
    // something whats load css by response.css_code
});

Thanks for any ideas.

ittus · Accepted Answer · 2018-05-16 11:41:41Z

1

You can inject css to head of component

loadCssRequest(location.href).then(function(reponse){
   var style = document.createElement('style');
   style.type = 'text/css';
   style.innerHTML = reponse;
   document.getElementsByTagName('head')[0].appendChild(style);
});

Or if you have css path on another server (for example /assets/css/xx.css)

var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', '/assets/css/xx.css');
document.getElementsByTagName('head')[0].appendChild(link);

answered May 16, 2018 at 11:41

ittus

22.5k5 gold badges62 silver badges59 bronze badges

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

Collectives™ on Stack Overflow

VueJS + Webpack + dynamic CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related