[Vuejs]-Bake SCSS variables into reusable single component files Vue

You should have this variables in a dedicated file (for example _variables.scss), in your project where you want to import your component. Then you should make this variables accessible to all the components. I suggest you to use style-resouces-loader, that will import your variable in every component. Vue ClI wrapper – vue-cli-plugin-style-resources-loader.

To export your UI library with already inlined CSS, you should build your UI library through vue-cli-service build. And then you can import your builded component with builded CSS styles, which was built from SCSS.