'Vue Vite scoped css won't assign style

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?

cssvue.jsvite


Solution 1:[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Matt Schlosser

Related Questions