CODEWITHSUNDEEP
javascriptcssvue.js
JimmyShoe
JimmyShoe

Reputation: 2259

Vue.js load CSS based on subdomain

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.

Upvotes: 2

Views: 405

Answers (1)

T. Short
T. Short

Reputation: 3614

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');
}

Upvotes: 1

Related Questions