Question

我正在玩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是由智能感知找到的，但找不到'〜styles / main'中定义的$ primary-color和$ secondary-color（并已由webpack正确加载）。

我是否缺少某些东西或无法使其正常工作？

Answer 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代码扩展。

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

Vue单个文件组件导入了Scs Intellisense

1 个答案: