Is it possible to share variable between SASS and Javascript in Vuex(Nuxt)?

Question

As in question. I use Vue, Vuex(Nuxt) and we also share all mixins and sass variables using: @nuxtjs/style-resources": "^1.0.0"

Which is newer version of "nuxt-sass-resources-loader": "^2.0.5"

I know that there i spossibility with Webpack such as here So my question is - is it posiibile to do it in similar way and how to configure it? What should I have installed and how can I add it to my nuxt.config.js?

EDIT: I also found that article but for me it is not working.

@Aldarund I don't want to modularize my css. Sometimes we use external library and we need to add some styles as js parameters. That's why I want to share sass variable with js. — Mieszczańczyk S.
– Mieszczańczyk S., Commented Aug 19, 2019 at 21:15
so the way to use css vars in js is to use css modules. And your article that u linked is for react. And its still use css modules in the end — Aldarund
– Aldarund, Commented Aug 19, 2019 at 21:58
I'm also interested by this question. The way I see is to hook on nuxt build and write json files with all sass variables. I'm currently trying to do that but missing a way to get all sass variables... I'm struggle with webpack :/ — ManUtopiK
– ManUtopiK, Commented Aug 20, 2019 at 19:20
I am looking for better approach. I have all mixins, style shared across components and I just want to have access to variables not only inside style but also in components script section so I can even style thing inline with sass variables. So I believe it is more like Webpack configuration but I don't know for sure and how can I achieve this. @ManUtopiK please add +1 for better SEO — Mieszczańczyk S.
– Mieszczańczyk S., Commented Aug 21, 2019 at 13:09

MarcRo · Accepted Answer · 2022-01-22 12:20:02Z

9

Short answer: yes.

SASS offers the option to export variables, which you can import as module and use like any other object. Webpack with sass-loader and node-sass handles the imports.

Example:

// in assets/scss/variables.scss

$white-color: #fcf5ed;

// the :export directive is the magic sauce for webpack
:export {
  whitecolor: #{$white-color};
}

// in store.js

import Styles from '~/assets/scss/variables.scss'

export const state = () => ({
  styles: {...Styles}
})

// in component
...
computed: {
  styles() {
    return this.$store.state.styles;
  }
}

Longer answer: You can also just use css variables for everything.

E.g.

// in assets/scss/variables.scss

$white-color: #fcf5ed;

:root {
  --whitecolor: #{$white-color};
}

// in component
...
mounted() {
  this.$el.style.color = 'var(--whitecolor)';
}

<style>
.component {
  color: var(--whitecolor);
}
</style>

edited Jan 22, 2022 at 12:20

answered Aug 24, 2019 at 22:14

MarcRo

2,4731 gold badge11 silver badges24 bronze badges

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

1 Comment

raevilman Over a year ago

A little update to the CSS trick, in the :root body, --whitecolor: $white-color; should be changed to --whitecolor: #{$white-color}; Source: sass-lang.com/documentation/breaking-changes/css-vars

Collectives™ on Stack Overflow

Is it possible to share variable between SASS and Javascript in Vuex(Nuxt)?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related