Vue.js Vue单文件组件导入的scss intellisense

我正在玩VSCode和vue。 我可以通过import语句将外部scss文件与vue sfc中的一些变量一起使用。除了intellisense没有加载.vue文件中的变量外，其他一切都正常工作

这是我在.vue文件中的样式标记

<style lang="scss" scoped>
@import '~styles/main';
$other-color: #FFAAAA;
.greeting {
    font-size: 20px;
    color: $secondary-color;
    border-bottom: 2px solid $primary-color;
    margin-bottom: 15px;
}
</style>

@导入“~style/main”；
$其他颜色：#ffaaa；
.问候语{
字体大小：20px；
颜色：$secondary color；
边框底部：2倍纯色$原色；
边缘底部：15px；
}

$other color由intellisense找到，但不包括在“~style/main”中定义的$primary color和$secondary color（由webpack正确加载）

---

我是否遗漏了一些东西，或者无法使其正常工作？

经过一点思考，我想出了这个解决方案。 我首先创建了一个单独的.scss文件，将所有组件样式移到了那里，然后在我的vue sfc文件中添加了对组件scss的引用

<!-- .vue -->
<template>
<div>
    <div class="greeting">Hello {{name}}{{exclamationMarks}}</div>
    <button @click="decrement">-</button>
    <button @click="increment">+</button>
</div>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
    props: ['name', 'initialEnthusiasm'],
    data() {
        return {
            enthusiasm: this.initialEnthusiasm,
        }
    },
    methods: {
        increment() { this.enthusiasm++; },
        decrement() {
            if (this.enthusiasm > 1) {
                this.enthusiasm--;
            }
        },
    },
    computed: {
        exclamationMarks(): string {
            return Array(this.enthusiasm + 1).join('!');
        }
    }
});
</script>

<style src="./Hello.scss" scoped></style>

你好{{name}{{{惊呼标记}
-
+
从“Vue”导入Vue；
导出默认Vue.extend({
道具：['name'，'initialFaciency'，]，
数据（）{
返回{
热情：这是最初的热情，
}
},
方法：{
increment（）{this.premission++；}，
减量{
如果（this.com>1）{
这是热情；
}
},
},
计算：{
感叹号标记（）：字符串{
返回数组（this.firmation+1）。加入（“！”）；
}
}
});

这样，使用导入的scss文件中的变量就没有问题了

在本例中，问候语类在Hello.scss文件中定义。为了在我的vue文件中自动完成scss类，我使用visual studio代码扩展名

---

如果您有更好的解决方案，请与他人分享。

如果在“@import”声明中添加“.scss”扩展名，是否有效？否，我已尝试添加扩展名。为您提供信息，我还安装了vetur扩展。您使用的是哪些vue扩展？对于vue，我只使用vetur扩展