未在组件中应用作用域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>

导出默认值{
名称：“AddRecipeForm”
}
形式{
显示器：flex；
弯曲方向：立柱；
}

使用范围为

的属性

应用时，CSS不会加载。当
作用域
被删除时，它不会被应用

但是，我希望将其保留在组件的本地

当
作用域
属性存在时，为什么不应用CSS？
似乎通过完全重新加载页面解决了这一问题。热重新加载应该考虑作用域css

但是，对于未来的查看器，当作用域CSS未应用于子组件时，通常会询问这一问题。这可以通过使用解决。（例如：使用
.selector>>。所需的选择器{}
）

编辑：由于这仍然是一个活动，我将把我的评论带到答案中<代码>：：v-deep
也可以根据您使用的预处理器工作。
通过运行“Thread serve”重建Vue应用程序解决了我的问题。
由于某些原因，范围样式在首次添加到组件的热重新加载过程中不会应用。完整页面重新加载修复了这个问题，从那时起，样式（因为它们已被检测到）会随着连续的热重新加载而更新。
与OP的症状完全相同，但这里的建议迄今为止都没有起作用，我需要继续前进，因此我们的解决方案通常依赖CSS选择器：


将唯一命名的类添加到下面的顶级元素中
用唯一命名的类作为所有作用域（非全局）选择器的前缀

当现场调试我们的CSS时，它有一个意想不到但受欢迎的优点，那就是CSS规则的起源现在在devtools中是显而易见的

MyComponent.vue

<template>
    <v-card class="MyComponent" ... >
        <div class="fancyBox" ... >
         /* ... */
    </v-card>
</template>

<style>
    .MyComponent .fancyBox { /* scoped to any MyComponent instance */ }
    .globalBox { /* we wouldn't put a global style here, obv */ }
</style>


/* ... */
.MyComponent.fancyBox{/*作用域为任何MyComponent实例*/}
.globalBox{/*我们不会在这里放置全局样式，obv*/}

是的，以这种方式为组件范围的样式添加前缀是一件痛苦的事情，但是，至少这是一件熟悉的事情，并且您在devtools中获得了额外的好处，可以将样式的源追溯到声明它的组件

需要注意的是，当然，父范围的CSS也会向下扩展到子范围。这至少是我们熟悉的CSS行为。
我只需要刷新页面。显然，当应用了
作用域
属性时，webpack不会自动重新加载页面。重新加载不应与作用域样式一起工作。确保您的热重新加载设置正确：相关SO问题：@alanbuchanan如果提供了此问题的答案，请为其选择一个答案。谢谢，这也为我修复了此问题。在使用>>>深度选择器之前，我无法获得我编写的任何css来访问DOM，现在一切都正常了！使用SCSS而不是普通CSS时，请使用
/deep/
（包括斜杠），因为SCSS解析器不处理
>
@ramespareek try:：v-deep。这取决于你的CSS loaderit是否工作。请删除您的评论。以免混淆未来的游客。