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

Question

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?

You can not edit Sass variables at run time. It's a CSS preprocessor and needs to be compiled. Maybe custom properties is the way to go, you can easily edit them with Js. — Simplicius
– Simplicius, Commented Feb 7, 2021 at 7:19

saibbyweb · Accepted Answer · 2021-02-07 20:18:21Z

1

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.

edited Feb 7, 2021 at 20:18

answered Feb 7, 2021 at 14:45

saibbyweb

3,3042 gold badges37 silver badges55 bronze badges

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

4 Comments

Madhan Kumar R Over a year ago

I have tried as you mentioned above. It doesn't works. Thanks @saibbyweb

saibbyweb Over a year ago

I updated the code with a tried and tested example. You can do the comparison in the mounted hook of the component using this.route.path instead of 'window.location.path'

Madhan Kumar R Over a year ago

I have already tried this. Not working for me.

Madhan Kumar R Over a year ago

It may be work for you , In my case we are setting theme variable in scss file. Once it loaded we couldn't overwrite the theme variables.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related