直接@import在中不生效，是因为它仅插入样式标签而无加载时机控制，不参与vite的css处理链，且不受scoped作用域约束，导致顺序错乱、规则被覆盖或解析失败。
为什么直接 @import 在 <style></style> 里不生效
Vue 3 的 <style scoped></style> 会为样式加作用域，@import 导入的 CSS 不受该作用域影响，但也不会自动提升到全局——它会被当作普通 CSS 插入，却**没有加载时机保证**。尤其当目标 CSS 依赖其他样式（比如重置、变量定义）时，顺序错乱就导致规则被覆盖或失效。
常见现象：@import url('element-plus/dist/index.css') 写在组件 <style></style> 里，DevTools 看得到 link 节点，但按钮颜色/间距没变。
- 根本原因：它只是“插入”了样式标签，但没控制加载时机，也不参与 Vite 的 CSS 处理链（如 postcss、scope 注入）
- 更糟的是：如果该 CSS 含
@layer或@charset，Vite 可能直接跳过解析 - 不推荐在单组件中用
@import引第三方全量 CSS，尤其像 Element Plus、Naive UI 这类带基础重置的库
unplugin-vue-components 怎么配才真正按需加载样式
这个插件本身不处理 CSS，它只负责生成组件 import 和样式 import 语句——但**样式路径是否正确、是否被真正加载，取决于 resolver 的配置和实际文件存在性**。
以 Element Plus 为例，错误写法：ElementPlusResolver({}) 默认走 element-plus/es/components/button/style/css，但该路径在新版中已废弃（v2.4+），实际应为 element-plus/theme-chalk/button.css。
- 必须显式指定
importStyle: 'css'（而非默认'less'），否则插件会尝试导入不存在的 less 文件，构建时报Cannot find module - 若使用
theme-chalk主题，确保element-plus/theme-chalk/base.css已在 main.js 全局引入（它是所有组件样式的公共基础） - resolver 返回的
sideEffects路径必须精确匹配 node_modules 中的真实路径，大小写、斜杠方向都不能错 - 检查生成的代码：打开 .vite/deps/_metadata.json 或查看编译后 JS，确认类似
import 'element-plus/theme-chalk/button.css'确实存在
动态加载 CSS 文件时，link 标签加了却没生效
手动创建 <link rel="stylesheet"> 是可行的，但极易因 DOM 插入位置、加载时机、重复加载逻辑出错。
典型失败场景：组件 onMounted 里执行 document.head.appendChild(link)，但此时 Vue 已完成首次渲染，第三方组件（如 <el-date-picker></el-date-picker>）的内部结构尚未挂载完毕，CSS 规则匹配不到真实 class。
- 必须等目标元素真实出现在 DOM 后再触发样式加载，不能仅靠
onMounted—— 推荐用MutationObserver监听容器节点变化 - 避免重复插入：用
document.querySelector('link[href*="xxx"]')查重，而不是靠 Map 缓存 src 字符串（CDN 带版本号时容易误判） - 加载完成回调不可靠：
link.onload在某些 CDN（如 jsDelivr）或跨域场景下不触发，改用link.sheet && link.sheet.cssRules.length > 0检测 - 移除时务必清空
link.disabled = true，而不是直接remove()，否则下次加载可能因浏览器缓存策略复用旧 sheet
打包后 CSS 优先级被 Tailwind 或 reset 覆盖怎么办
这不是“引入没成功”，而是“引入了但被压住了”。Vue 3 + Vite 项目中，CSS 加载顺序由导入位置决定，但 HMR 和分包会让顺序变得隐蔽。
例如：Tailwind 的 @tailwind base 在 main.js 最前，Element Plus 的 button.css 在组件内动态加载，后者虽然后置，但因是异步插入，实际生效时间晚于所有同步 CSS，导致按钮边框、字体大小被 Tailwind 的 base 规则覆盖。
- 最稳方案：把第三方 UI 库的 CSS（如
element-plus/theme-chalk/index.css）放在 main.js 最末尾的import，确保它最后解析 - 禁用 Tailwind preflight：在
tailwind.config.cjs中设corePlugins: { preflight: false }，否则它会给button强加border: none，而 Element Plus 的.el-button无法靠 specificity 赢过它 - 不要用
!important修补：它会让后续主题切换、暗色模式适配彻底失效 - 真正起效的是「加载顺序 + 选择器 specificity + 无重置干扰」三者闭环，缺一不可
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
