How do I access Sass variables inside a Vue component?

Question

I am using Vueify with Laravel/Elixir. I use Sass inside my Post.vue file but it references colors I declare in @import "resources/assets/sass/bootstrap-variables-override.scss"; Is there a way to not have to include that line inside of every single .vue component I make?

Delladelle

I don't know of anyway with browserify. But with webpack you can simple use this loader: github.com/shakacode/sass-resources-loader and make sure to use <style lang="sass!sass-resources"> in your vue file – Armlet

Answer 1

There's a discussion on the official vue-loader repo with the exact same question and it boils down to: no, you have to import the variables file in each .vue component that needs it.

One thing you can do to simplify the situation slightly is to add the folder with the variables file to your include paths, so you can just do @import "my-variables.scss"; instead of specifying the entire path every time.

Formyl

Answer 2

you can archive this by importing this in you top level component, usually called <app></app> and expose it by using a css class:

.primaryColor {
 color: <variable here>
}

Then you can just access that class in every child component

Salaidh

Answer 3

Not always applicable but if you're using Vue as part of a Nuxt application then you can use style-resources-module to achieve this.

Hoe