Inject global variables in vue-components with webpack and style-resource-loader - vue.js

Question

I've some global variables in ./src/assets/styles/_globals.scss. Now I want to add them to all Vue-Components so I'm able to use variables within the scoped styles.
I'm using Gridsome for which this works fine with the following configuration:
const path = require('path')
function addStyleResource (rule) {
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [
path.resolve(__dirname, './src/assets/styles/_globals.scss'),
],
})
}
module.exports = {
siteName: 'Gridsome',
plugins: [],
chainWebpack (config) {
// Load variables for all vue-files
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
// or if you use scss
types.forEach(type => {
addStyleResource(config.module.rule('scss').oneOf(type))
})
}
}
Furthermore I'm using StoryBook to get a web-view with all my components. This is my configuration:
module.exports = async ({config, mode}) => {
config.module.rules.push({
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../src/assets/styles/'),
});
config.module.rules.push({
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader', {
loader: 'style-resources-loader',
options: {
patterns: [
path.resolve(__dirname, './src/assets/styles/_globals.scss'),
],
type: ['vue-modules', 'vue', 'normal-modules', 'normal']
}
}],
include: path.resolve(__dirname, './src/assets/styles/_globals.scss')
});
return config;
};
The configuration throws no error but used scss-variables within my scoped styles in my VueComponents could not be parsed/found.
How can I publish those global styles to all my components?
My folder structure is this:
*
- .storybook
-- webpack.config.js
- src
-- assets
--- styles
---- _globals.scss
-- components
--- // All my Vue-Components