SFCs with scoped CSS don't style img/source in <nuxt-picture>

[LukaHarambasic]

Hi,
I'm currently migrating to nuxt-image and I found a small problem with scoped CSS. Not a big one, I just removed scoped and "scoped" it with a class (see here). It would be nice if I still could use scoped. I'm not even sure if that's something nuxt-image can fix. Might be linked to #288.

Steps to reproduce

<nuxt-picture
      class="image"
      :src="post.image"
      :alt="post.alt"
      sizes="xs:200px md:500px lg:1024"
/>

<style lang="sass" scoped>
  .image
    margin: 0 0 2rem 0
    width: 100%
    display: block
    source, img
      border-radius: $border-radius
      width: 100%
      min-height: 16rem
</style>

Expected result

<source> & <img> are styled when <style lang="sass" scoped> is used.

Actual result

<source> & <img> are not styled when <style lang="sass" scoped> is used.

Thanks a lot for this nice package <3

[justinmetros]

You can usually fix this in your Nuxt components <styles> directly using the deep selector.

Nuxt/Vue 2 Scss:

::v-deep img {
  /* styles here */
}

Nuxt/Vue 2 Postcss or regular css:

>>> img {
   /* styles here */
}

Vue 3:

::v-deep(img) {
  styles
}

I very rarely use sass so hopefully that works like:

::v-deep img
  /* styles */

I'm not sure exactly how scoped css is parsed, but I've run into this need in Nuxt many times. I think the concept is that the scoped css belongs only to your component, and the internal DOM that is created by <nuxt-img> in this case is another component. To style it scoped from your parent you need the deep selector.

[DamianGlowala]

Closing as solution has been provided.