Vue Vite scoped css won't assign style

Question

I'm trying to add a background-image to a view in vue vite. I don 't want to set this background-image on every view so I tried to add it inside the views site using a scoped css style.

But once I assign scoped to the style tag it won't use the style...

Example code which doesn't work:

<style lang="css" scoped>
  body{
    background: url("../../assets/images/background.jpg") !important;
  }
</style>

Once I remove the scoped it would work but it would add the background to every view which shouldn't happen. Does anyone know why this happens?

Matt Schlosser · Accepted Answer · 2022-04-10 13:01:12Z

2

From the docs

When a <style> has the scoped attribute, its CSS will apply to elements of the current component only.

This means thst only the elements in your <template> will get the style and since there is no <body> in your template, then it doesn't get style.

answered Apr 10, 2022 at 13:01

Matt Schlosser

1,0547 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

Vue Vite scoped css won't assign style

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related