css加载顺序由import语句书写顺序决定，而非文件位置或命名；全局样式须在main.ts顶部、createapp()前显式import，且scss需装sass而非node-sass，@use路径须带后缀，纯变量文件无顶层规则则不生成css。
直接 import './style.css' 就能生效，但“能用”不等于“正确”，很多样式失效、顺序错乱、变量不可用的问题，都出在路径、时机或预处理器配置上。
全局 CSS 必须在 main.ts 最顶部 import
“全局”不是靠文件放哪，而是靠谁先加载。Vite 不会自动把某个 CSS 注入到所有组件之前，必须显式控制入口点。
-
main.ts文件里，createApp()调用前就 import，顺序不能错：import '@/styles/global.css'（别写在import App from './App.vue'后面） - 如果用了
@/别名，确保vite.config.ts里配了resolve.alias，否则报Failed to resolve import - 纯 CSS 文件里定义的
:root变量（如--primary-color），只有被最先加载，后续所有组件里的var(--primary-color)才能取到值
SCSS/Less 文件 import 失效？先查 sass 是否装对
import './index.scss' 不报错但没样式，大概率是 sass 编译器没装或装错了——Vite 4+ 只认 sass（Dart Sass），node-sass 已废弃且静默失败。
- 执行
npm install -D sass（不是node-sass） - 检查
Network面板是否出现.css请求（由.scss生成），没有就说明编译根本没触发 -
@use或@forward的路径必须带后缀：@use './mixins.scss'，漏掉.scss会静默失败 - 文件里如果只有
@mixin定义、没有顶层选择器（如.btn { ... }），就不会生成任何 CSS —— Vite 不会注入空样式块
想读 CSS 内容当字符串？用 ?raw，但别指望它自动生效
import css from './reset.css?raw' 确实能拿到原始字符串，但它不会创建 <style></style> 标签，也不会触发任何 CSS 处理流程。
-
?raw只支持.css、.txt等纯文本文件，.scss?raw直接报错 - 拿到字符串后得手动插入：
document.head.appendChild(Object.assign(document.createElement('style'), { textContent: css })) - 如果同时写了
import './reset.css'和import './reset.css?raw'，前者仍会走完整 CSS 构建流程，产物里照样有reset.css - SSR 场景下用
?raw拿到的内容要小心 XSS，需做 HTML escape
按需加载组件样式时，importStyle 和实际路径必须严格匹配
用 unplugin-vue-components 自动引入 Element Plus 或 Naive UI 组件时，样式不生效，往往是因为 importStyle 配置和包内真实路径对不上。
- 进
node_modules/naive-ui/lib/button/看有没有style/目录；没有就别设importStyle: 'css'，否则报Cannot find module - Element Plus 配
importStyle: 'sass'，前提是项目已装sass，且vite.config.ts里没禁用.scss解析 - 某些私有 UI 库用多层
export * from导出，插件无法静态分析样式路径，只能退回到手动import 'xxx/lib/index.css'
最容易被忽略的一点：CSS 加载顺序完全由 import 语句的书写顺序决定，而不是文件位置或命名。哪怕 global.css 放在 src/styles/ 最深层，只要它在 main.ts 里是第一个 import，它就最优先；反之，哪怕叫 z-reset.css，只要 import 在后面，它的规则就可能被覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
