Vite原生支持CSS导入，直接在main.js或main.ts中import即可生效；需确保路径正确、文件存在，且避免动态import、作用域冲突及@import语法错误。
直接在 main.js 或 main.ts 中 import CSS 文件即可生效
Vite 原生支持 CSS 导入，无需安装 loader 或额外插件。只要在入口文件（通常是 main.js 或 main.ts）中用 import 语句引入 CSS 路径，Vite 就会在启动时自动注入 <style> 标签到 HTML 的 <head> 中。
常见错误现象：
-
Failed to resolve import "./style.css"—— 路径写错或文件不存在 - 样式没生效但控制台无报错 —— 可能被其他样式覆盖，或 CSS 选择器作用域太窄（比如只写了
.btn却没对应 DOM） - 热更新不触发样式刷新 —— 确保不是在
node_modules下改的 CSS（Vite 不监听该目录）
实操建议：
- 推荐把全局样式统一放在
src/style/global.css，然后在main.js里写import "@/style/global.css" - 如果用
@/别名，必须提前在vite.config.ts中配置resolve.alias，否则会报模块解析失败 - 不要在
main.js里用动态import()加载 CSS —— 它不会插入到 head，也不会参与 HMR
@import 在 CSS 文件里嵌套引入是否可靠？
可以，但有局限性。Vite 支持标准 CSS 的 @import 规则（如 @import "./reset.css";），但仅限于同级或相对路径，且不支持条件、媒体查询内嵌套（@import url(...) screen and (min-width: 768px); 会被忽略）。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
-
@import必须写在 CSS 文件最顶部，前面不能有任何空行或注释（否则解析失败） - 嵌套层级过深（比如 A.css → B.css → C.css）可能触发 Vite 的递归限制，默认最多 10 层
- 如果被
@import的文件是 SCSS/Less，Vite 不会自动编译 —— 需要对应预处理器插件（如@vitejs/plugin-vue-jsx不处理这个）
引入第三方 CSS 库（如 Font Awesome、Tailwind）要注意什么？
第三方 CSS 本质仍是普通 CSS 文件，引入方式一致，但需注意加载顺序和副作用。
关键点：
- Font Awesome：用
import "@fortawesome/fontawesome-free/css/all.css"，确保图标字体资源路径正确（它内部用url()引用字体文件，Vite 会自动重写路径） - Tailwind：必须先引入
tailwindcss/tailwind.css，且该文件里必须包含@tailwind base等指令，否则生成的工具类不生效 - 多个第三方 CSS 同时引入时，顺序决定层叠优先级 —— 后 import 的 CSS 会覆盖前面同名规则
- 避免重复引入：比如同时
import "normalize.css"和import "tailwindcss/base"，后者已含重置逻辑，可能冲突
为什么有时候 CSS 引入了却看不到效果？
最常被忽略的是 CSS 作用域和浏览器渲染时机问题，而不是引入本身失效。
排查方向：
- 打开开发者工具 Elements 面板，确认
<style>标签是否真的出现在<head>里，并检查内容是否为空或含语法错误 - 检查是否启用了 CSS Modules（文件名含
.module.css）—— 此时类名会被哈希化，直接写class="xxx"不会匹配 - Vue 组件中用了
<style scoped>，而你在全局 CSS 里写的规则无法穿透作用域 - 某些 UI 库（如 Element Plus）要求手动调用
app.use(...)才注册样式，光 import CSS 不够
真正难的不是“怎么引入”，而是引入后如何确保它按预期参与构建、HMR 和最终渲染 —— 这些细节不显眼，但一出错就卡半天。
