0

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?

Trevor Reid
  • 3,310
  • 4
  • 27
  • 46
webbymaster
  • 7
  • 6

1 Answers1

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>
Trevor Reid
  • 3,310
  • 4
  • 27
  • 46
  • 1
    You are right. But it was only is misstake by typing here. I used h1 in my code, but also several other selectors to test. No css code will apply – webbymaster Mar 16 '19 at 10:46
  • Ah, I'd suggest asking a new question with the correct code sample and explanantion. Or edit this question, but in a way that preserves the original situation so that answers don't become confusing. In either case I'll try to see what else may be the trouble. – Trevor Reid Mar 16 '19 at 10:54
  • 1
    just fixed the post – webbymaster Mar 16 '19 at 11:03