如何在单个vue文件下调用SCSS的变量

Question

外部引入SCSS的话，可以使用变量。
如何在单个vue文件下（如下所示）调用SCSS的变量呢？

<template>
  <div>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  }
}
</script>

<style lang="scss" scoped>
</style>

Answer 1

@import  "@/styles/var";

Answer 2

/ 改变主题色变量 /
$--color-primary: rgb(83, 7, 7);

/ 改变 icon 字体路径变量，必需 /
$--font-path: '~element-plus/lib/theme-chalk/fonts';

:export {

--primaryColor: $--color-primary;

}

在js显示的是

--primaryColr: '$--color-primary'