范围内的 CSS 未在组件内应用答案

【问题标题】：Scoped CSS not being applied within the component范围内的 CSS 未在组件内应用
【发布时间】：2017-05-10 08:22:07
【问题描述】：

我有以下表单组件：

<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？

【问题讨论】：

我只需要刷新页面。显然，当应用 scoped 属性时，webpack 不会自动重新加载页面
热重载应该适用于范围样式。确保您的热重载设置正确：vue-loader.vuejs.org/en/configurations/extract-css.html
相关SO问题：stackoverflow.com/a/28633425/943435
@alanbuchanan 如果提供了这个问题的答案，请选择一个答案。

标签： css vue.js

【解决方案1】：

看来这个问题是通过完全重新加载页面来解决的。热重载应该处理作用域的 css。

但是对于未来的查看者，当作用域 CSS 未应用于子组件时，通常会询问此问题。这可以通过使用deep selectors 来解决。（例如：使用.selector >>> .desired-selector {}）

编辑：由于这仍在进行中，因此我将在答案中发表评论。 ::v-deep 也取决于您使用的预处理器。

【讨论】：

谢谢，这也为我解决了问题。在使用 >>> Deep 选择器之前，我写的任何 CSS 都无法访问 DOM，现在一切正常！
在使用 SCSS 而不是纯 CSS 时使用 /deep/（包括斜杠），因为 SCSS 解析器不处理 >>>。
@RameshPareek 也试试 ::v-deep。这取决于你的 CSS 加载器
成功了。请删除您的评论。以免混淆未来的访客。

【解决方案2】：

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

【讨论】：

【解决方案3】：

与 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>

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

需要注意的是，当然，父级 CSS 也会流向子级。至少，这是熟悉的 CSS 行为。

【讨论】：

【解决方案4】：

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

【讨论】：