Nuxt.js: Bulma sass variables

[syffs]

Is there a way to use bulma sass variables from .vue files?

<style lang="sass" scoped>
    .section
        background-color: $grey-light
</style>

When I try to do so from vue files: Undefined variable: "$grey-light"

Bulma sass is loaded from nuxt.config.js

  css: [
    { src: '~/assets/css/main.sass', lang: 'sass' }, 
    { src: 'font-awesome/scss/font-awesome.scss', lang: 'scss' }
  ]

Using bulma classes works fine, but not the variables in specific .vue files...

_{This question is available on Nuxt.js community (#c1881)}

[uptownhr]

@Syffs i normally create a shared.scss file that I import from my .vue components that need them.

[syffs]

@uptownhr it's indeed working if I import my main.sass file in every component in which I need variables, but I was hoping for a more elegant solution where nuxt.config.js would take care of all the loading...

[thisguyscode]

@Syffs - If I've understood correctly then you might be interested in this thread: https://github.com/nuxt/nuxt.js/issues/1092

I implemented nuxt-sass-resource-loader as suggested by @anteriovieira and it worked a treat for sharing variables. The only config required was this (below). Of course you'll just need to replace ./assets/styles/imports.scss with the path to your main.sass file.

/* nuxt.config.js */

module.exports {
  ...
  modules: [
    ['nuxt-sass-resources-loader', './assets/styles/imports.scss']
  ],
  ...
}

[syffs]

@thisguyscode My goal is indeed make variables available to the whole project!
Your implementation looks very good, I'll give it a try!

[huxleydigitaluk]

Halelujah. @thisguyscode just saved my life with that above. Thanks.

[husayt]

This seems to be resolved now. Clo

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.