请问如何配置才能在组件中访问公用scss中的变量尼？

Question

我现在使用的是@vue/cli 4.05这个版本

• 我现在通过style-resources-loader这个插件，让组件解析出公用的scss文件的样式，但是无法在组件中访问公用scss文件中的变量
• 请问如何配置才能够访问scss文件中的变量?
• 我现在的vue.config.js配置入下，参考这篇文章

const path=require('path')
module.exports={
  publicPath: process.env.NODE_ENV === 'production' ? '/public/' : './',
  assetsDir:'assets',
  indexPath:'myIndex.html',
  filenameHashing:false,
  productionSourceMap: false,
  chainWebpack:config=>{
    const types=['vue']
    types.forEach(type=>{
      config.module.rule('scss').oneOf(type).use('style-resource')
      .loader('style-resources-loader')
      .options({
        patterns:[
          path.resolve(__dirname,'./src/assets/css/variable.scss'),
          path.resolve(__dirname,'./src/assets/css/base.scss'),
        ]
      })
    })
  }
}

• 这是公用的scss文件

//variable.scss
@charset 'utf-8';
$bg:"skyblue";
$w:"100px";
$h:"100px";
$tsize:"50px";
.test{
  height: 100px;
  width: 100px;
  background: rgb(19, 147, 233);
}


//base.scss
@charset 'utf-8';
.test{
  border: 1px solid rebeccapurple;
}

• 这是test组件

<template>
  <div>
    <div class="test">
      test
    </div>
  </div>
</template>
<style lang="scss">
  .test{
    /*这个$tsize访问不了，但没报错*/
    font-size:$tsize;
  }
</style>

• 实现结果，字体大小并没有生效

### 问题描述

Answer 1

可以参考一下.