如何在vue模板的scoped style中使用全局sass变量？

Question

问题描述

在webpack配置文件里加入了对scss/sass文件的处理器 并引入了全局sass变量 但是在vue模板里使用变量提示变量不存在

问题出现的环境背景及自己尝试过哪些方法

开发环境为Win10x64 webpack3.5 vue2.5.3 npm5.6 并安装了vue-style-loader css-loader sass-loader node-sass等相关插件

相关代码

webpack配置文件：

      {
        test: /\.s[ac]ss$/,
        use: [          'vue-style-loader',          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              data: `$color: red;`
            }
          }
        ]
      },

vue模板文件：

<style lang="scss" scoped>.red {    color: $color;
}</style>

你期待的结果是什么？实际看到的错误信息又是什么？