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>