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?

I don't know of anyway with browserify. But with webpack you can simple use this loader: https://github.com/shakacode/sass-resources-loader and make sure to use ` — meo, Jan 31 '16 at 15:38

score 6 · Answer 1 · answered Jan 14 '17 at 15:53

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.

score 2 · Answer 2 · answered Mar 27 '16 at 18:49

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

answered Mar 27 '16 at 18:49

Alexander Meesters

380
2
12

score 0 · Answer 3 · answered Dec 20 '19 at 20:38

0

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.

answered Dec 20 '19 at 20:38

Brady Dowling

4,920
3
32
62

How do I access Sass variables inside a Vue component?

3 Answers3