css - Vue.js 作用域 css 在单个文件组件中不起作用

Question

我尝试设置单个文件组件。但是指定的 css(也是作用域 css)将被忽略并且不会呈现。

我用一个简单的组件试了一下:

<template>
  <div>
    <h1>A Headline</h1>
    <p>A test example</p>
  </div>
</template>
<style scoped>
    h1 {
        color: red;
    }
</style>

除了未应用 css 样式外，组件渲染良好。

我做错了什么？

Answer 1

更新:这个答案是对最初发布的问题的解决方案。根据修改后的代码示例，它不再适用。当我有问题的答案时，我会再次更新。

---

您正在将样式应用于类 .h1 但没有元素具有此类。您似乎打算将样式应用于 h1 元素，因此从样式定义的名称中删除 .:

<template>
  <div>
    <h1>A Headline</h1>
    <p>A test example</p>
  </div>
</template>
<style scoped>
    h1 {
        color: red;
    }
</style>