CODEWITHSUNDEEP
vue.jssassscss-mixins
Madhan Kumar R
Madhan Kumar R

Reputation: 63

VueJS: Changing SCSS variable Colors dynamically or import scss files dynamically

I'm having sub-Domains like xyz.in/ab, xyz.in/bc , etc.. which runs in a single server. I need to config different styles for different domain. So I need to change the primary, secondary, ..etc colors dynamically.

ab.scss

$primary: white, 
$secondary: grey

bc.scss

$primary: red, 
$secondary: light-grey

I need to config different files dynamically based on URL (note: I need change the files dynamically on run time). How can I achieve this?

Upvotes: 1

Views: 1424

Answers (1)

saibbyweb
saibbyweb

Reputation: 3244

If the url is xyz.in/ab, then this.$route.path should give you /ab. Then you can try ES6 dynamic import to solve your problem like this:

mounted() {
    /* figure out the scss file name according to url */
    const fileName = this.$route.path === '/ab' ? 'one.scss' : 'two.scss';

    /* import file dynamically (assuming scss files are in assets/scss folder) */
    import("@/assets/scss/" + fileName);
}

Let me know if it worked for you.

Upvotes: 1

Related Questions