How to @extend sass classes or use sass global variables in Vue components March 19, 2019January 24, 2020 Bogdan 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 src/styles/style.scss .my_class_to_extend { backgroud-color: aqua; } 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 module.exports = { css: { loaderOptions: { sass: { data: `@import "@/styles/style.scss";` } } } } Then, you can use @extend on which component you want <style lang="scss" scoped> .my_extended_class { @extend .my_class_to_extend; } </style> Remember that you have to use sass in both extended and extender sheets for this to work.