css - 范围内的 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属性是否存在？

Answer 1

这似乎是通过重新加载页面来解决的。热重载应该处理范围内的 css。

但是对于 future 的观众来说，当范围内的 CSS 没有被应用到子组件时，这通常会被问到。这可以通过使用 deep selectors 来解决。 . (例如:使用 .selector >>> .desired-selector {})

编辑:由于这仍在进行中，我会将我的评论带入答案。 ::v-deep 也可以根据您使用的预处理器工作。

---

Vue 3 编辑

现在 Vue 3 已经稳定并且已经完全发布了一段时间，请参阅深度选择器的 Vue 3 文档:https://vuejs.org/api/sfc-css-features.html#scoped-css

也就是说，现在的语法是::deep(.some-class)。还有一些新功能，可以在上面的链接文档中阅读。