CODEWITHSUNDEEP
sassvue.jslaravel-elixir
Brynn Bateman
Brynn Bateman

Reputation: 769

How do I access Sass variables inside a Vue component?

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?

Upvotes: 12

Views: 7173

Answers (3)

Brady Dowling
Brady Dowling

Reputation: 5532

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.

Upvotes: 0

mzgajner
mzgajner

Reputation: 2348

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.

Upvotes: 6

Alexander Meesters
Alexander Meesters

Reputation: 380

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

Upvotes: 2

Related Questions