Vue.js не работает в одном файловом компоненте

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>