Have you ever faced with a challenge to import the same SASS or SCSS file(s) in a bunch of components and you don’t want to do it again and again for each new component? You may say — I even can’t imagine why I need to do that 🧐 if so there a few examples below.

The most common reasons — let’s imagine you did a great mixin for flexbox and want to use it in any component or you want to use a brand color from global sass variables which were defined in the global theme.

Pay attention that I’m talking about a style section in Vue.js components and not about your global styles. I think it’s better once to see, below you can see a piece of code which describes these situations.

Solution

Rescue came from Stack Overflow. All you need is to configure loaderOptions section in your vue.config.js file by adding a few lines you can see below.

And it looks weird that you have to use a data option which for me wasn't an obvious thing because I didn’t find it in official Vue CLI docs.

As you have already guessed, these lines will be added in each style section of all your components. Actually, that’s it!

Don’t forget about the performance.

My opinion that if you are importing more than 3 files or these files are very heavy you have to review your application/styles structure and solve it in another way. Be careful and do not overuse with that.

PS

During I was writing this article I found that this problem was already described by others, however, I decided to share my experience.

If you liked this post, please click the clap 👏 button! And, feel free to ask or give any kind of feedback. Don’t forget to follow me!