What is the best way to organize the style code in vue if they are reused, but at the same time they need to be slightly customized in each component?

Question

Vue.js

Hey!
Now I'm thinking about how to most competently organize styles in vue. Faced with the fact that in some places I have terrible code repetitions (but there is hardcode, forgivably). But so far in my head I can’t even roughly understand the scheme of the refactor.
I'm using sass, but the variables are not globally accessible for some reason. Or do I need to import them in every file?
And another point is that there are classes that are used in several components. If you make scoped styles, then the style body has to be transferred to each component, and if not scoped, then they can no longer be customized (they change in all components).
What is the best way to organize the style code in vue if they are reused, but at the same time they need to be slightly customized in each component?
Sorry for the little confusion, I'm sick :(

Answer 1

Global connection of variables and mixins can be configured in the config

css: {
    loaderOptions: {
        sass: {
            data: `@import "@/styles/config/env-production.scss";`,
        },
    },
},