Sass无法实现CSS懒加载，因其仅在编译期工作；真正的样式懒加载依赖JS动态import()触发构建工具（Webpack/Vite）代码分割，并配合CSS提取配置生成独立CSS文件。
CSS 组件无法通过 Sass 实现真正的“懒加载”——Sass 是编译期工具，不参与运行时资源加载。所谓“懒加载 CSS”，实际是构建工具（Webpack/Vite）配合模块化导入做的代码分割，Sass 只能辅助控制哪些样式被包含进哪个 chunk。
为什么 @use 和 @import 不等于 CSS 懒加载
Sass 的 @use 或 @import 全部在构建时解析合并，哪怕你只 @use "components/button" 一次，它的所有顶层规则（如 .btn { ... }）都会无条件进入最终 CSS；它不感知页面是否真的渲染了按钮，也不生成独立的 CSS 文件。
常见错误现象：@use "components/modal" 被引入但页面从不打开弹窗，结果 .el-modal 样式仍完整打包进主 CSS。
-
@use控制的是 Sass 符号（变量/函数/mixin）的可见性，不是 CSS 规则的输出时机 - 真正决定“某段 CSS 是否出现在某个 chunk 里”的，是 JS 中的
import()调用位置 + 构建工具的 CSS 提取配置 - 如果你没在 JS 层做动态 import，Sass 再怎么拆模块也毫无意义
真正起作用的：把 Sass 封装进异步组件的 import() 链路
Vue Router 中路由级组件的 CSS 能“随需加载”，靠的是 JS 动态导入触发构建工具提取关联样式，而不是 Sass 语法本身。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 确保组件文件（如
Dashboard.vue）内部有@import './Dashboard.scss'或<style lang="scss">块 - 路由配置写成
component: () => import('./views/Dashboard.vue')，而非component: Dashboard - Webpack 必须启用
mini-css-extract-plugin，Vite 必须开启build.cssCodeSplit: true - 别在
onMounted里才调import()，得在router.beforeEach或路由 resolve 阶段提前触发，否则样式插入滞后导致闪屏
如何让 Sass 模块“配合”懒加载不拖后腿
Sass 本身不懒，但可以避免反向破坏懒加载效果——比如防止重复打包、误引入无关样式。
关键做法：
- 每个可懒加载的组件，对应一个独立的 SCSS 文件（如
Dashboard.scss），只@use它真正需要的 mixin/variables，不@use "all" - 禁用全局
@import "base/reset"到每个组件 SCSS 中；重置样式应由主入口统一注入，否则每个 chunk 都带一份 - 避免在 mixin 中写顶层规则（如
.btn { @content }），这会让所有调用该 mixin 的地方都产出重复选择器 - 用
@mixin封装结构逻辑，用$variable控制外观，但别用@function动态拼选择器名——构建工具无法 tree-shake 字符串生成的 CSS
构建失败时最容易忽略的 CSS 分离失效点
即使写了 import('./Page.vue')，CSS 仍可能没分离成功，最终全打进 JS bundle 里，导致“懒加载”形同虚设。
检查清单：
- Webpack：确认
mini-css-extract-plugin已正确 replacestyle-loader，且optimization.splitChunks.chunks: 'all'开启 - Vite：确认
vite.config.ts中build.cssCodeSplit为true（默认值），且没被插件覆盖 - 错误现象：
network面板看不到Dashboard.xxxx.css请求，只看到一个巨大的index.xxxx.js加载了全部样式 - 终极验证方式：查看构建产物目录，确认
dist/assets/下存在与组件名对应的独立 CSS 文件
最常被跳过的环节是构建配置验证——很多人以为写了 import() 就自动懒加载，却没检查 CSS 是否真被抽离。没有独立 CSS 文件，就没有真正的样式懒加载。
