How to use SASS mixins and variables in all Vue components?

Question

Sass

If I include global styles in the component:

<style lang="scss">
@import "./sass/main.scss";
.bs-navbar-nav{
    background-color: $bg_color; /*переменная из main.scss */
}
</style>

In this case, I can use the $bg_color variable or mixins from the imported file, but I can't use the variable in another component without re-importing it. Is it possible to include main.scss globally so that the variables are available in any component?

Answer 1

This can be done via webpack and the sass-resource-loader plugin. Pass a file with variables into it, as a result they will be available everywhere.