Im trying to use classes defined in a scss file in a vue component but doesn't work

Here are the files:

_zero-state.scss

@use '../../variables' as *;

.zero-state {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  padding: 80px;

  &__image {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 208px;
    height: 208px;

  }
  
  &__header {
    margin-top: 20px;
    // text-align: center;
  }

  &__content {
    margin-top: 12px;

  }

  &--empty {
    .zero-state__image{
      background-image: url('#{$illustrations-path}empty.svg')
    }
  }

  &--search {
    .zero-state__image{
      background-image: url('#{$illustrations-path}search.svg')
    }
  }

  &--loading {
    .zero-state__image{
      background-image: url('#{$illustrations-path}empty.svg')
    }
  }

  &--report {
    .zero-state__image{
      background-image: url('#{$illustrations-path}report.svg')
    }
  }

  &--no-connection {
    .zero-state__image{
      background-image: url('#{$illustrations-path}no-connection.svg')
    }
  }

  &--not-found-day {
    .zero-state__image{
      background-image: url('#{$illustrations-path}not-found-day.svg')
    }
  }

  &--not-found-night {
    .zero-state__image{
      background-image: url('#{$illustrations-path}not-found-night.svg')
    }
  }

  &--danger {
    .zero-state__image{
      background-image: url('#{$illustrations-path}danger.svg')
    }
  }

  &--ice-pop {
    .zero-state__image{
      background-image: url('#{$illustrations-path}ice-pop.svg')
    }
  }

  &--lost {
    .zero-state__image{
      background-image: url('#{$illustrations-path}lost.svg')
    }
  }

  &--fingerprint {
    .zero-state__image{
      background-image: url('#{$illustrations-path}fingerprint.svg')
    }
  }
}

main.scss

@forward './variables';
@forward './mixins';

@forward './modules/zero-state/zero-state';

@forward './basics/colors/colors';
@forward './basics/flex/flex';
@forward './basics/typography/typography';
@forward './basics/grid/grid';
@forward './basics/icons/icons';
@forward './basics/logos/logos';
@forward './basics/text/text';

base-zero-state.vue

<script setup>
import { computed } from 'vue'

const props = defineProps({
  header: {
    type: String,
    required: true
  },
  content: {
    type: String,
    required: true
  },
  color: {
    type: String,
    default: 'black'
  },
  empty: {
    type: Boolean,
    default: false
  },
  report: {
    type: Boolean,
    default: false
  },
  noConnection: {
    type: Boolean,
    default: false
  },
  notFound: {
    type: Boolean,
    default: false
  },
  danger: {
    type: Boolean,
    default: false
  },
  icePop: {
    type: Boolean,
    default: false
  },
  lost: {
    type: Boolean,
    default: false
  },
  fingerprint: {
    type: Boolean,
    default: false
  },
  search: {
    type: Boolean,
    default: false
  }
})

const fontColor = computed(() => {
  return 'color: ' + props.color
})

const objectClass = computed(() => {
  const notFoundClass =
    new Date().getHours() > 18 ? 'zero-state--not-found-night' : 'zero-state--not-found-day'
  return {
    'zero-state': true,
    'zero-state--empty': props.empty,
    'zero-state--search': props.search,
    'zero-state--report': props.report,
    'zero-state--danger': props.danger,
    'zero-state--ice-pop': props.icePop,
    'zero-state--lost': props.lost,
    'zero-state--fingerprint': props.fingerprint,
    'zero-state--no-connection': props.noConnection,
    [notFoundClass]: props.notFound
  }
})
</script>

<template>
  <div :class="objectClass">
    <div class="zero-state__image"></div>
    <div class="zero-state__header">
      <div :style="fontColor" class="h6-header content-title">{{ header }}</div>
    </div>
    <div :style="fontColor" class="zero-state__content content-title body-copy-bold grey500">
      {{ content }}
    </div>
    <div class="zero-state__actions"></div>
  </div>
</template>

vite.config.js

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // api: 'modern-compiler', // or "modern"
        additionalData: `
          @use "@/assets/scss/main.scss" as *;
          `
      }
    }
  },
})

package.json

 "devDependencies": {
    "@mdi/font": "^7.4.47",
    "@rushstack/eslint-patch": "^1.2.0",
    "@vitejs/plugin-vue": "^5.2.1",
    "@vitest/coverage-c8": "^0.31.1",
    "@vue/eslint-config-prettier": "^7.1.0",
    "@vue/test-utils": "^2.3.2",
    "eslint": "^8.39.0",
    "eslint-plugin-vue": "^9.11.0",
    "jsdom": "^22.0.0",
    "prettier": "^2.8.8",
    "sass": "^1.85.1",
    "vite": "^6.2.1",
    "vite-plugin-ejs": "^1.6.4",
    "vitest": "^0.31.0"
  }

I've missing something? I can use the colors defined in @forward './basics/colors/colors'; in the proyect but no the classes defined @forward './modules/zero-state/zero-state';