Vue.js load CSS based on subdomain

Question

I have a Vue js application made using the Vue cli 3. I am using sass loader and node-sass in my project.

If I have multiple subdomain for same code eg site1.mysite.com and site2.mysite.com how can I load a different css file depending on the subdomain?

I already have a JavaScript function in a file to return the subdomain value.

In my app.vue file I have a scss style section is there a way to access this function in the scss and then load the relevant CSS for the subdomain assuming that I have named the css/scss files in a structured way.

Example:

site1_theme.scss and site2_theme.scss in a root folder /assets/scss

Or is there a different way to do this?

Thanks in advance for your help.

T. Short · Accepted Answer · 2020-01-08 11:04:11Z

1

Have yo tried using dynamic imports?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports

So something along the lines of:

if (domain === 'site1.mysite.com') {
    import('/assets/scss/site1_theme.scss');
} else {
    import('/assets/scss/site2_theme.scss');
}

edited Jan 8, 2020 at 11:04

answered Jan 8, 2020 at 10:25

T. Short

3,62417 silver badges30 bronze badges

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

Collectives™ on Stack Overflow

Vue.js load CSS based on subdomain

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