首先报错：

1： 我们需要在vue.config.js进行配置

module.exports = {
  productionSourceMap: false,
  // 整个项目使用全局的  scss变量
  css: {
    loaderOptions: {
      sass: {
        prependData: `  // 进行配置时候 有新旧之分
        @import '@/styles/variables.scss';   //这里注意 有个;不会还会报错
        `
      }
    }
  },
}

2：

 // 旧----改为data
data: `@import "@/styles/variables.scss";`
// 新----改为perpendData
prependData: `@import "@/styles/variables.scss";`

3: 然后在
自己命名的 variables.scss中定义全局 变量
如下：

$theme: #353535;
$gray: #9a9a9a;
$red: #e41b19;
// 注意: 继承的样式也要写到这个文件中--如果写到其他样式文件  如Index.scss然后在main.js中引入---还是会报错的
.green {
   color: #0f0;
 }

在单个页面中使用：
如 test.vue 页面中

<style lang="scss" scoped>
.card {
  @extend .green;
  background: $theme;
  padding: 0px 37px 37px 37px;
}
</style>