Scoped 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后， 会被应用。< / p>

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

为什么在scoped属性存在时未应用CSS？

Answer 1

由于某些原因，在第一次将重定义的样式添加到组件时，不会在热重装期间应用它们。整页重新加载解决了该问题，从那里开始，样式已经被检测到，因此可以通过连续的热重新加载进行更新。

Answer 2

看起来这是通过完全重新加载页面来解决的。热重载应该照顾范围的CSS。

然而，对于未来的观看者，当范围CSS未应用于子组件时，通常会询问此问题。这可以通过使用deep selectors来解决。 （例如：使用G = AbelianGroup((4,4,5))）

Answer 3

与 OP 完全相同的症状，但到目前为止这里的建议都没有奏效，我需要继续前进，所以我们的解决方案是通常依赖 CSS 选择器：

• 将唯一命名的类添加到