Vue.js 视图中的 vue 样式不适用于 html

我已经和VUE3建立了一个新项目.我开始使用一些包实现，但后来我意识到我用Component编写的CSS不适用于HTML语言.下面是一个非常简单的视图示例

<template>
  <div>
    <p class="asd">Hello</p>
  </div>
</template>

<style>
.asd {
  color: purple;
}
</style>

结果是，文本不是紫色的. 我已经判断了它是否被其他一些css覆盖，但没有，它不会在dev工具的样式屏幕中显示:

我try 和判断的内容:

• 我试过写作风格为"p.asd{..."最后再加!important分.没有变化.
• 我已经通过将文本从"Hello"更改为"Hello World"来判断我是否在正确的页面上工作，但它发生了变化，所以我正在正确的页面上工作.
• 如果是开发环境问题，我得到了一个产品版本，但不是，从构建的html中得到了相同的结果.
• 我试着将css改为App.vue，令人惊讶的是，在那里编写的样式有效，但在视图中却不起作用.
• 我已经try 了一个新的浏览器来解决缓存问题，没有变化.
• 我已经try 添加作用域，没有变化.
• 我已经try 添加脚本标签，没有变化.脚本标记运行良好，console.log脚本运行正常，但仍然没有样式更新.
• 我试过内联css，它起作用了.

这是我的Package.json:

  "name": "new-project",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "express": "^4.18.2",
    "firebase": "^9.22.1",
    "pinia": "^2.0.36",
    "vue": "^3.3.2",
    "vue-router": "^4.2.0",
    "vue-tel-input": "^8.1.1"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.2.0",
    "@vitejs/plugin-vue": "^4.2.3",
    "@vue/eslint-config-prettier": "^7.1.0",
    "eslint": "^8.39.0",
    "eslint-plugin-vue": "^9.11.0",
    "prettier": "^2.8.8",
    "vite": "^4.3.5",
    "vite-plugin-webfont-dl": "^3.7.4"
  }
}

Codesandbox示例:https://codesandbox.io/p/sandbox/github/ihsanser/vue-vite-style-bug/tree/master

我不知道我是否错过了一些非常简单的东西，但我现在几个小时都想不出原因.