范围内的 CSS 未在组件中应用

Question

我有以下表单组件：

 <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 时，它 会 被应用。

但是我想将它保留在组件的本地。

当 scoped 属性存在时，为什么没有应用 CSS？

原文由 alanbuchanan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

出于某种原因，首次将作用域样式添加到组件时，它们不会在热重载期间应用。全页重新加载解决了该问题，从那里样式，因为它们已被检测到，通过连续的热重新加载进行更新。

原文由 Adam Jagosz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

通过运行 ‘yarn serve’ 重建 Vue 应用程序已经解决了我的问题。

原文由 Akash Kumar Seth 发布，翻译遵循 CC BY-SA 4.0 许可协议