我用vue 3建立了一个新的项目。我开始使用一些包实现，但后来我意识到我在组件中编写的CSS并不适用于HTML。下面是一个非常简单的视图示例

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

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

在结果中，文本不是紫色的。我已经检查了它是否被其他一些css覆盖，但没有，它不会在开发工具的样式屏幕中显示：

我试过和检查过的：

• 我尝试过将风格写成“p.asd {...”，并在最后添加一个!important。没有变化。
• 我已经通过将文本从“Hello”更改为“Hello World”来检查我是否在正确的页面上工作，并且它发生了变化，因此我正在正确的页面上工作。
• 我得到了一个生产构建，如果它是一个开发环境的问题，但没有，从构建的html得到了相同的结果。
• 我尝试将CSS移到App.vue，令人惊讶的是，在那里编写的样式可以工作，但在视图中却不行。
• 我已经尝试了一个新的浏览器缓存问题，没有变化。
• 我试过添加scoped，没有变化。
• 我已经尝试添加脚本标签，没有变化。脚本标记工作正常，console.log脚本工作正常，但仍然没有样式更新。
• 我试过内联CSS，它工作。

这是我的包。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
我不知道我是不是错过了一些很简单的东西，但我现在几个小时都找不到原因。