Vue.js 范围内的 css 不能在单个文件组件中工作答案

【问题标题】：Vue.js scoped css not working in single file componentVue.js 范围内的 css 不能在单个文件组件中工作
【发布时间】：2019-08-07 07:17:03
【问题描述】：

我尝试设置单个文件组件。但是指定的 css（也是作用域 css）被忽略并且不被渲染。

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

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

组件渲染得很好，只是没有应用css样式。

我做错了什么？

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：