vue单文件组件导入scss intellisense答案

【问题标题】：Vue single file component imported scss intellisensevue单文件组件导入scss intellisense
【发布时间】：2019-02-17 06:11:47
【问题描述】：

我正在玩 VSCode 和 vue。我可以通过 import 语句在 vue sfc 中使用带有一些变量的外部 scss 文件。一切正常，除了智能感知不加载 .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>

$other-color 由 intellisense 找到，但不是 $primary-color 和 $secondary-color 定义在 '~styles/main' 中（并由 webpack 正确加载）。

是我遗漏了什么还是无法让它工作？

【问题讨论】：

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

标签： vue.js sass visual-studio-code intellisense

【解决方案1】：

玩了一会儿后，我想出了这个解决方案。我首先创建了一个单独的 .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>

通过这种方式，我可以毫无问题地使用导入的 scss 文件中的变量。

在本例中，greeting 类在 Hello.scss 文件中定义。为了在我的 vue 文件中自动完成 scss 类，我使用 this Visual Studio 代码扩展。

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

【讨论】：