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

<style>使用 scoped属性。

当应用时，CSS 没有被加载。当 scoped被删除时，它 [俄语]被应用。

但是，我想让它保持在组件的本地。

当 scoped属性出现时，为什么 CSS 没有被应用？

52485 次浏览
小开

It appears this was solved by doing a full-reload of the page. Hot reload should take care of scoped css.

However for future viewers, This is commonly asked when scoped CSS isnt being applied to a child component. This can be solved by using deep selectors. (e.g: Using a .selector >>> .desired-selector {})

EDIT: Since this is still getting activity, I'll bring my comment into the answer. ::v-deep also works depending on what preprocessor you're using.

Vue 3 Edit

Now that Vue 3 is stable and been in full release for a while, see the Vue 3 docs for deep selectors: https://vuejs.org/api/sfc-css-features.html#scoped-css

Namely, this syntax is now: :deep(.some-class). There are also some new features which can be read in the linked docs above.

小开

Rebuilding the Vue App by running 'yarn serve' has fixed the problem for me.

小开
最佳答案

For some reason, scoped styles don't get applied during hot reload when they are first added to the component. Full page reload fixes the issue, from there the styles, since they have been detected, get updated with consecutive hot reloads.

小开

Precisely same symptoms as the OP but none of the recommendations here so far have worked and I need to move on so our solution is to rely on CSS selectors normally:

  • add a uniquely-named class to the top-level element below <template>
  • prefix all scoped (non-global) selectors with that uniquely-named class

which had the unexpected but welcome upside when live-debugging our CSS is that the origin of the CSS rule is now obvious in 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>

Yes, it's a pain to prefix component-scoped styles this way, but, at least it's a familiar thing to do and you get the added benefit in devtools of tracing the source of a style back to the component that declared it.

Caveat is that, of course, parent-scoped CSS will also bleed down to child-scopes. This, at least, is familiar CSS behaviour.


提交答案