我在./src/assets/styles/_globals.scss中有一些全局变量。现在，我想将它们添加到所有Vue组件中，以便能够在范围样式内使用变量。

我正在使用Gridsome，它在以下配置下可以很好地工作：

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))
    })
  }
}

此外，我正在使用StoryBook来获取所有组件的网络视图。这是我的配置：

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$/,'sass-loader',{
            loader: 'style-resources-loader',options: {
                patterns: [
                    path.resolve(__dirname,type: ['vue-modules','normal']
            }
        }],'./src/assets/styles/_globals.scss')
    });

    return config;
};

配置不会引发任何错误，但是无法解析/发现我的VueComponents中的作用域样式中使用的scss变量。

如何将这些全局样式发布到我的所有组件中？

我的文件夹结构是这样：

* -.storybook -webpack.config.js -src -资产 -样式 ---- _globals.scss - 组件 -/ //我所有的Vue组件