How to @extend sass classes or use sass global variables in Vue components

Extend classes and use of variables are two of the sass most powerful tools. But using them in a VueJS application could be a little bit tricky. In this article, I will show you a way of using these two on components without the need for importing the sheet containing them at each usage.

Let’s assume that you have a class that you want to extend

Assuming you generated your project with @vue/cli, you have to add the following statement to vue.config.js in order to have file visibility throughout your application

Then, you can use @extend on which component you want

Remember that you have to use sass in both extended and extender sheets for this to work.

Leave a Reply

Your email address will not be published. Required fields are marked *