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.