不能在组件中@import全局css，因为会忽略@import，非scoped下则注入时机晚于渲染导致样式闪动或漏识别，且使样式成为组件级副作用；正确做法是在main.ts统一导入。
为什么不能在组件里 @import 全局 CSS
在 <style scoped></style> 里写 @import './assets/css/common.css' 是无效的——Vue 的作用域编译会直接忽略它；放在非 scoped 的 <style></style> 里虽能加载，但样式注入时机晚于组件挂载，尤其 SSR 或快速首屏时，class 可能被漏识别，图标、按钮等样式“闪一下才生效”。更麻烦的是，这种写法让样式变成组件级副作用：某个子组件没渲染，它的依赖样式就不可用。
main.ts 是唯一可靠的全局入口
所有真正需要全局生效的 CSS（比如重置样式、Iconfont、normalize、主题变量）必须统一在 main.ts 中导入。这是 Vue3 单入口应用的设计前提，也是构建工具（Vite/Webpack）解析依赖的权威路径。
-
import 'normalize.css'和import './assets/css/index.scss'都放这里 - 如果用了 SCSS，确保
vite.config.ts中已配置preprocessorOptions.scss.additionalData注入公共变量，避免每个组件重复@import - Iconfont 必须用
import './assets/iconfont/iconfont.css'，且检查其内部@font-face的url()路径是否匹配实际字体文件位置（如url('../fonts/iconfont.woff2')），否则出现方块或 404
按需引入组件库样式（如 Vant / Element Plus）
组件库的 CSS 不适合全量引入，但也不能靠组件内 @import 模拟“按需”——那只是假按需，打包体积没变，还破坏复用性。正确做法是配合自动导入插件，让样式和组件声明同步触发。
- 安装
unplugin-vue-components和对应解析器（如@vant/auto-import-resolver） - 在
vite.config.ts中启用Components({ resolvers: [resolver] })，它会自动为用到的组件生成对应的 CSS import 语句 - 注意：该机制只对组件名（如
<van-button></van-button>）生效，不处理手动写的 class（如class="van-button"），后者仍需全局引入或额外配置 - 若项目用 Rsbuild，同理替换为
@rsbuild/plugin-vue-components
容易被忽略的路径与缓存问题
路径写错和浏览器缓存是两个高频卡点，尤其在 Vite 项目中混用 public/ 和 src/ 资源时。
-
public/下的 CSS 或字体文件必须用绝对路径引用（如url('/fonts/iconfont.woff2')） -
src/下的资源要用相对路径或@/别名（如url('../fonts/iconfont.woff2')），别写成url('iconfont.woff2') - 修改完 CSS 或字体路径后，务必硬刷新（
Ctrl+Shift+R），否则旧缓存可能让@font-face加载失败，控制台报Failed to decode downloaded font - Vite 的 HMR 有时不会刷新 CSS @import 链，改完
index.scss后可临时删掉node_modules/.vite目录再重启
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
