Vue组件中使用Less变量报错的问题求助

大家好，我最近在Vue项目里用Less变量的时候遇到了个头疼的问题，明明已经导入了Less文件，可组件里还是报错，想请各位帮忙看看！

情况是这样的：我在assets/less/base.less文件里定义了一些全局变量和字体，代码如下：

@font-face {
  font-family: 'Poppins';
  src: url(../fonts/Poppins-Regular.ttf);
  font-weight: normal;
  font-style: normal;
}

@button-bg-color: #809c2c;
@button-bg-color-hover: #99b056;
@button-border-radius: 7px;
@button-font: 'Poppins';

然后我在App.vue的scoped样式里导入了./assets/less/main.less，代码是这样的：

<style lang="less" scoped>
@import './assets/less/main.less';

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2em;

  .header-title-nav {
    width: 60%;
  
    display: flex;
    align-items: center;
    justify-content: space-between;

    i {
      width: 6.25em;
      height: 6.25em;
    }

    .logo {
      width: 100%;
      height: 100%;
    
      cursor: pointer;
    }
  }

  .header-btn {
    background-color: @button-bg-color;
    border-radius: .5em;
    width: 12.5em;
    height: 7.8125em;
    text-decoration: none;
    color: white;
    font-size: .8em;
    font-weight: 600;

    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
      background-color: #99b056;
    }
  }
}
</style>

现在的问题是，VSCode里在.header-btn下的background-color: @button-bg-color;这行一直提示「property value expected」错误。我已经确认安装了Less依赖，而且这些变量在main.less里是可以正常使用的，看别人遇到类似问题只需要加个导入语句就解决了，但我这么做没用，实在搞不懂哪里出问题了😭

有没有大佬能帮我分析下原因，或者给点解决思路呀？

备注：内容来源于stack exchange，提问作者bignosecss