作用域CSS不在组件内应用

css CSS

乐泡芙

2020-03-12

我有以下表单组件:

<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无法应用

第923篇《作用域CSS不在组件内应用》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
神乐米亚 2020.03.12

通过运行“纱线服务”来重建Vue App对我来说已经解决了这个问题。

番长神奇 2020.03.12

看来这是通过完全重新加载页面解决的。热重装应注意范围内的CSS。

但是,对于将来的查看者,通常在不将范围CSS应用于子组件时会问到这一点。这可以通过使用深度选择器来解决(例如:使用.selector >>> .desired-selector {}

猪猪十三 2020.03.12

出于某种原因,将范围样式样式首次添加到组件时,不会在热重装期间应用它们。全页重新加载解决了该问题,从那里开始,样式已经被检测到,因此可以通过连续的热重新加载进行更新。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android