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

---

我只需要刷新页面。显然，当应用scoped属性时，webpack不会自动重新加载页面。 - alanbuchanan

热重载应该与作用域样式一起工作。确保您的热重载设置正确：https://vue-loader.vuejs.org/en/configurations/extract-css.html - Jordan Haines

相关的SO问题：https://dev59.com/N14b5IYBdhLWcg3w1UvL#28633425 - Yogi

@alanbuchanan 如果提供了答案，请选择一个答案来回答这个问题。 - Brandon Deo

Answer 1

看起来这个问题是通过对页面进行完全重载来解决的。热重载应该可以处理作用域CSS。

但是对于未将作用域CSS应用于子组件时常见的情况，可以使用深度选择器来解决。(例如: 使用.selector >>> .desired-selector {})

编辑：由于这个问题仍然在活跃中，我会将我的评论放到答案中。::v-deep也可以根据你使用的预处理器来工作。

---

Vue 3编辑

现在Vue 3已经稳定并且已经完全发布一段时间了，请查看Vue 3文档以获取有关深度选择器的信息：https://vuejs.org/api/sfc-css-features.html#scoped-css

换句话说，现在这个语法是：:deep(.some-class)。还有一些新功能可以在上面链接的文档中阅读到。

- Brandon Deo

---

谢谢，这也解决了我的问题。在使用 >>> 深度选择器之前，我无法让我编写的任何 CSS 生效，现在一切都正常了！ - ADP

在使用 SCSS 时，请使用 /deep/（包括斜杠），而不是普通的 CSS，因为 SCSS 解析器无法处理 >>>。 - Pistos

尝试使用 ::v-deep，这取决于你的 CSS loader。 - Brandon Deo

它运行成功了。请删除您的评论，以免混淆未来的访问者。 - Ramesh Pareek

@BrandonDeo 这对我来说是正确的解决方案。 使用 SCSS 的 ::v-deep 起作用了。 - undefined

Answer 2

由于某些原因，当scoped样式首次添加到组件时，在热重载期间不会应用这些样式。全页面重新加载可以解决此问题，之后，由于已检测到这些样式，它们会随着连续的热重载而更新。

- Adam Jagosz

Answer 3

我的症状和提问者一模一样，但迄今为止这里的建议都没有奏效，因此我需要继续前进，所以我们的解决方案是通常依靠CSS选择器：

• 在<template>下面的顶级元素中添加唯一命名的类。
• 在所有作用域范围内（非全局）的选择器前加上该唯一命名的类。

当我们实时调试CSS时，这种方法具有意外但欢迎的优点，即在开发工具中容易看到CSS规则的来源。

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行为。

- storsoc

Answer 4

通过运行“yarn serve”重新构建Vue应用程序已经为我解决了这个问题。

- Akash Kumar Seth