vue3中页面级css不能用内@import，因其被忽略、导致闪动、破坏构建；正确方式是动态import+usehead或路由守卫插入，并注意全局变量注入。
按页面引入 CSS 在 Vue3 里不是“想加就加”，而是必须避开 @import 在 <style></style> 中的陷阱，否则会闪动、漏样式、破坏构建流程——真正合理的方式只有一种：用动态 import + useHead（或手动插入 <link>），配合路由级生命周期控制加载时机。
为什么不能在页面组件的
很多人在 Home.vue 的 <style></style> 块里写 @import './home.css'，以为这样就是“按页面引入”。实际它既不按需，也不可控：
-
@import在<style scoped></style>中被 Vue 编译器直接忽略，压根不生效 - 即使去掉
scoped，CSS 文件也是在组件挂载后才解析，首屏渲染时 class 已存在但无样式，导致闪动 - 这类
@import不走 Vite/Webpack 的模块依赖图，无法被 PostCSS 处理（比如 Autoprefixer 不生效）、无法参与 PurgeCSS 扫描、也不能被 HMR 正确热更新 - 构建产物里它会被打到主 CSS 包中，根本没实现“按页面拆分”
正确做法：用 defineAsyncComponent + 动态 import 加载 CSS
Vue 官方推荐的按需加载路径是 JS 层控制，CSS 作为资源随组件一起异步加载。适用于路由级页面（views/ 下的组件）：
- 把页面组件包装成异步组件：
const Home = () => import('@/views/Home.vue') - 在
Home.vue的<script setup></script>顶部，用import('./home.css')（注意不是@import）显式加载对应 CSS - Vite 会自动把该
import()转为独立 chunk，和组件 JS 一起懒加载，且 CSS 插入时机与组件挂载严格同步 - 如果用了
unhead或@vueuse/core的useHead，可进一步确保<link rel="stylesheet">在 SSR 或 SEO 场景下也正确注入
更轻量的替代：路由守卫中手动 insertAdjacentHTML
如果你不想改组件结构，又需要 CSS 真正“只在进入该路由时加载”，可以在路由守卫中操作 DOM：
- 在
router.beforeEach里判断 to.name === 'Home'，然后执行：document.head.insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="/assets/css/home.css">') - 对应的 CSS 文件必须放在
public/目录下（如public/assets/css/home.css），路径写绝对 URL（以/开头） - 退出路由时记得清理：
document.querySelector('link[href="/assets/css/home.css"]')?.remove() - ⚠️ 注意：这种方式绕过构建系统，CSS 不参与 PostCSS、不压缩、不 Tree-shaking，仅适合纯静态、极少改动的页面样式（比如某个活动页的定制皮肤）
最易被忽略的一点：无论哪种方式，都必须确认该 CSS 文件里没有依赖全局变量（比如 SCSS 变量），否则动态加载时上下文缺失会导致编译失败或样式异常——真正需要复用的变量，应该通过 css.preprocessorOptions.scss.additionalData 全局注入，而不是靠文件间 @import 链接。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
