VueJS - Share global variable from data to internal scss file (DYNAMIC CSS)

Question

I have a master component named App.vue and in that file I am calling an ajax request to the server which returns JSON of colors.

My ajax call is located inside of the vue life cycle hook named created. When the ajax is done, it will populate the local data base on the result.

In the same file, I have style written in SCSS.

<style lang="scss">
$primary: #ff2000;
$secondary: #000111;
</style>

Is it possible to share to this SCSS file block those JSON of colors from the state of the components? Please imagine the below image attached.

** CORRECTIONS **

this.colors = colors.data
.color-secondary { background: $secondary; }

The colors are dynamic that is why it is coming from a database.

Thanks in advance.

SMPLYJR · Accepted Answer · 2020-01-29 05:16:45Z

I think I nailed it!! But I'm not quite sure if it is recommended or not. I don't even know yet the up and down side of doing this tweak. But it did work! :)

created() {
  // assume that this colors are coming from an async ajax call
  let colors = {
    primary: 'red',
    secondary: 'blue'
  }

  this.setThemeColors(colors);
},
methods: {
  setThemeColors(colors) {
    let style = document.documentElement.style;

    for (let key of Object.keys(colors)) {
      style.setProperty("--theme-color-" + key, colors[key]);
    }
  }
}

It's all set up from the root of your stylesheet. Check below to use it,

<style lang="scss">
$color-primary: var(--theme-color-primary);
$color-secondary: var(--theme-color-secondary);

.color-primary {
  color: var(--theme-color-primary)
}
.color-secondary {
  color: var(--theme-color-secondary)
}
</style>

But another problem encountered, css variables is not working in IE11 and below!

Decade Moon · Accepted Answer · 2020-01-27 08:51:08Z

1

It is not possible to update the values of SCSS variables dynamically like you want to. Web browsers do not understand SCSS, only CSS. SCSS is compiled into CSS ahead of time; the variables get compiled away.

Somewhat recently, CSS variables have become a thing, so maybe that could be something that you can consider looking into.

Other than that, you don't generally make dynamic updates to stylesheets. Perhaps some kind of CSS-in-JS solution might be what you're looking for.

answered Jan 27, 2020 at 8:51

Decade Moon

34.4k8 gold badges84 silver badges104 bronze badges

Comments

Olaf · Accepted Answer · 2020-01-27 08:10:21Z

0

The key feature of SCSS is that it compiles readable / less bloated CSS into normal CSS. Adjusting the styles on-the-fly inside a single file component is not possible.

See this question for possible workarounds: https://stackoverflow.com/a/48201646/6803592

If you're looking for a solution, you could possibly get the colors before your vue app loads.

answered Jan 27, 2020 at 8:10

Olaf

1,1328 silver badges20 bronze badges

Collectives™ on Stack Overflow

VueJS - Share global variable from data to internal scss file (DYNAMIC CSS)

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related