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>