Облачный CSS не применяется в компоненте

У меня есть следующий компонент формы:

<template>
    <div>
        <form>
            <input placeholder="Recipe Name">
            <textarea placeholder="Recipe Description..." rows="10"></textarea>
        </form>
    </div>
</template>

<script>
export default {
    name: 'AddRecipeForm'
}
</script>

<style scoped>
form {
    display: flex;
    flex-direction: column;
}
</style>

<style> использует атрибут scoped.

При применении CSS не загружается. Когда scoped удаляется, применяется делает.

Однако я хочу сохранить его локальным для компонента.

Почему CSS не применяется, когда присутствует атрибут scoped?

Ответы

Ответ 1

Похоже, что это было решено путем полной перезагрузки страницы. Горячая перезагрузка должна заботиться о CSS.

Однако для будущих зрителей это обычно спрашивают, когда CSS с областью не применяется к дочернему компоненту. Это можно решить с помощью глубоких селекторов. (например: Использование .selector >>> .desired-selector {})

Ответ 2

Восстановление приложения Vue с помощью команды "yarn serve" устранило проблему для меня.