Not importing <style></style> inside SFC file?

[DouglasCalora]

Clear and concise description of the problem

I have components that has

An example of component:

<template>
  <div aria-live="polite" class="qas-status" :class="backgroundClass" role="status" />
</template>

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

defineOptions({
  name: 'QasStatus',
  inheritAttrs: false
})

const props = defineProps({
  color: {
    type: String,
    default: 'light-blue-2'
  }
})

const backgroundClass = computed(() => `bg-${props.color}`)
</script>

<style lang="scss">
.qas-status {
  background-color: red;
  border-radius: 100%;
  height: 16px;
  width: 16px;
}
</style>

The styles of class qas-status are not being applied.

Suggested solution

What to do?

Alternative

No response

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.