Why, when I use scoped in the style tag, Nuxt still load all the CSS and SCSS files in the network tab even those components are not rendered in the DOM, they are conditioned with v-if?

I tried also npm run generate, builded, but still same…

default.vue
<ModalsCookie v-if="!page.savedStates.find(el => el.btn === 'cookie' && el.activebtn)"/>

nuxt.config.ts
ssr: true,
vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@import "@/assets/scss/layouts.scss";'
        },
      }
    }
  },

This is inside of component (cookie.vue)
<style lang="scss" scoped>
$cookie: (
    "light": (
        cookie: #ff0000,
        cookiebg: #001aff
    ),

    "dark": (
        cookie: #001aff,
        cookiebg: #ff0000
    ),
);

.cookie {
  @include setColors($cookie);
  position: fixed;
  z-index: 9999;
  width: 100%;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  bottom: -500px;
  background: clr(cookie);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
  transition: bottom ease 0.2s, opacity ease 0.2s, visibility ease 0.2s;
}
</style>

I tried with only importing layouts.scss in default.vue but without vite in nuxt.config.ts, still same.
I tried only css without any scss function inside component, still same.