Vue.js scoped css not working in single file component

Question

I tried to set up a single file component. But the specified css (also scoped css) are ignored and not rendered.

I tried it with a simple component:

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

Component is rendered fine, except that the css style is not applied.

What am I doing wrong?

Answer 1

UPDATE: This answer was a solution to the question as originally posted. It no longer applies in light of the revised code example. I'll update this again when I have an answer to the question as it stands.

---

You are applying the style to the class .h1 but no element has this class. It seems likely you intended to apply the style to h1 elements, so remove the . from the name of your style definition:

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