Vue одного файла компонента импортированных scss intellisense - PullRequest
Новая
       23

Vue одного файла компонента импортированных scss intellisense

0 голосов
/ 12 сентября 2018

Я играю с VSCode и Vue. Я мог бы использовать внешний файл scss с некоторыми переменными в vue sfc через оператор import. Все работает отлично, за исключением того, что 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>

$ other-color обнаруживается с помощью intellisense, но не с $ primary-color и $ second-color, которые определены в '~ styles / main' (и загружаются корректно в веб-пакете).

Я что-то упустил или невозможно заставить это работать?

1 Ответ

0 голосов
/ 21 сентября 2018

Поработав немного, я вышел с этим решением.Сначала я создал отдельный файл .scss, переместил туда все стили компонентов, а затем добавил ссылку на компонент scss в свой файл vue sfc. 

<!-- .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.

В этом примере класс приветствие определен в файле Hello.scss.Чтобы получить автозаполнение классов scss в моих файлах vue, я использую это расширение кода Visual Studio.

Если у вас есть лучшее решение, пожалуйста, поделитесь.

...