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?

Are your using h1 class which you specified in the style? If it is tag then you need to remove the dot. — Pankaj
– Pankaj, Commented Mar 16, 2019 at 10:23
yes, it was a mistake in this post. originally i used it without the dot — webbymaster
– webbymaster, Commented Mar 16, 2019 at 11:10
Can you paster your webpack config please? I am having a similar issue... — pdp2
– pdp2, Commented Aug 21, 2020 at 15:39

Douglas Reid · Accepted Answer · 2019-03-16 21:20:00Z

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>

edited Mar 16, 2019 at 21:20

answered Mar 16, 2019 at 10:22

Douglas Reid

3,8986 gold badges34 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

webbymaster Over a year ago

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

Douglas Reid Over a year ago

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.

webbymaster Over a year ago

just fixed the post

Collectives™ on Stack Overflow

Vue.js scoped css not working in single file component

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related