Vite天生支持直接import CSS文件，无需额外loader或插件；它在启动时读取CSS内容并转为JS脚本，动态创建style标签注入head，开发时热更新快，构建时默认提取为style.css，顺序由import语句决定。
直接 import 就行，Vite 天生支持，不需要装 loader 或配插件。
import './style.css' 为什么能直接用
Vite 在启动时会把 import 的 CSS 文件读出来，转成一段 JS 脚本，动态创建 <style> 标签并注入到 <head>。这个过程对开发者完全透明，也不走 Webpack 那套 css-loader + style-loader 流程。
- 纯 CSS、SCSS、LESS、Stylus 都能识别，但预处理器需额外装包（如
sass、less） - 路径支持别名（如
@/styles/index.css），前提是vite.config.ts里配了resolve.alias - 开发时热更新生效快；构建时默认提取为
style.css，顺序按import语句先后决定
全局样式怎么确保所有组件都能用上
“全局”不是靠文件放哪，而是靠谁先加载、谁在最顶层。Vite 不会自动把某个 CSS 注入到所有组件作用域前，必须显式控制入口点。
- 在
main.ts最顶部import '@/styles/global.css'，这是最可靠的方式 - 如果用了 SCSS/Less，想让变量、mixin 全局可用，得走
css.preprocessorOptions.sass.additionalData注入，例如：@use "@/styles/variables" as *; -
additionalData对纯.css文件无效——它只经过预处理器编译的文件才触发 - 别在
additionalData里写@import "@/styles/reset.css"，这不会生效；reset.css 得单独import
为什么 @import url() 在 CSS 文件里总报错或加载慢
这不是 Vite 的问题，是 CSS 规范本身的设计缺陷。@import 是串行阻塞的，浏览器必须等父样式表解析完，才能发起子资源请求。
立即学习“前端免费学习笔记（深入）”；
- 常见错误现象：
Failed to resolve import或页面白屏几秒，实际是某层@import卡住了 - 它不支持
media条件懒加载（@import url(x.css) screen and (max-width:768px)无效） - 无法用 JS 动态控制，
style.textContent = "@import"完全不生效 - 真正需要条件加载时，改用 JS 动态插入
<link rel="stylesheet">，或用import()异步加载模块 CSS
Scoped 样式里怎么用全局类名
Vue 的 <style scoped> 会给选择器加属性哈希，比如 .btn[data-v-f3f3f3f3]，而全局 CSS 里没这个属性，自然不匹配。
- 单个规则穿透：用
::v-deep(.btn-primary) { color: red; }（括号和选择器缺一不可） - 整块穿透：Vite 4.3+ 支持
<style scoped></style>内加::v-global .text-sm { ... }，但仅限顶层选择器 - 更推荐的做法：把原子类（
.flex、.text-center）抽到独立的base.css，并在main.ts中import；组件内避免再用scoped覆盖这些类
真正容易被忽略的是构建阶段的 CSS 合并逻辑——开发时每个 @import 独立加载，构建后全压进一个 style.css，顺序错乱会导致 @mixin 调用早于定义。解决办法只有一个：所有全局定义集中到单一入口 SCSS 文件，其他文件只写规则，不定义。
