直接 import './page.scss' 不等于按页面加载 CSS，因为它仅将 SCSS 编译进产物，不保证样式作用域隔离；真正实现按页加载需构建工具分包，使 SCSS 与对应页面 JS 同 chunk 加载。
为什么直接 import './page.scss' 不等于按页面加载 CSS
它只是让 Vite/Webpack 把这个 SCSS 文件编译进最终产物，但不保证它只在对应页面生效——如果多个入口都 import 了同一个 button.scss，那它的样式就会重复出现在每个 chunk 的 CSS 中。所谓“按页面加载”，核心是让某份样式只随特定路由/页面 JS 一起下载、解析和注入，而不是全局存在。
必须用独立入口文件 + 构建工具分包
真正起作用的不是 Sass 语法，而是构建工具能否把某个 SCSS 文件和它对应的 JS 页面打包到同一个 chunk，并控制其加载时机。Sass 自身没有运行时模块加载能力。
- 为每个页面创建专属 SCSS 入口，例如
pages/home.scss、pages/profile.scss - 在对应页面的 JS/TS 文件里
import './home.scss'（注意后缀必须是.scss） - Vite 用户：在
vite.config.ts中配置manualChunks，按路径匹配 SCSS 文件归属：build: { rollupOptions: { output: { manualChunks: { home: ['src/pages/home.scss'], profile: ['src/pages/profile.scss'] } } } } - Webpack 用户：启用
mini-css-extract-plugin，并在splitChunks.cacheGroups中配test: /pages\/[^/]+\.scss$/，且设enforce: true
避免 @use 导致样式泄露到其他页面
@use 本身不输出 CSS，但它导入的 mixin 或变量一旦被 @include 或写进顶层规则，就会生成样式。如果多个页面入口都 @use "utils/flex" 并各自 @include flex.center()，那 flex 工具类可能被重复生成。
- 把纯逻辑（mixin/函数/变量）抽成不带顶层样式的文件，例如
utils/_flex.scss只含@mixin center() { ... } - 禁止在工具文件里写
.center { ... }这类选择器规则 - 所有可复用的 class 样式（如
.btn）必须集中定义在统一入口，由 PurgeCSS 或手动控制剔除 - 检查最终打包产物中，
home.css是否含.profile-header类——如果有，说明@use链路或@import路径没切干净
别忽略 HMR 和热更新对样式顺序的影响
开发时改一个 pages/home.scss，Vite 可能会动态插入新的 <style> 标签，导致它出现在已有样式之后，覆盖掉本该优先的通用重置规则。
立即学习“前端免费学习笔记（深入）”；
- 确保项目只有一个主样式入口（如
main.scss）负责全局重置、字体、基础变量注入 - 禁用
mini-css-extract-plugin的 HMR（Webpack）或设css.hotReload: false（Vite），避免热更新打乱顺序 - 浏览器 Network 面板里过滤
.css，确认每个页面加载的 CSS 文件名和内容是否严格对应其路径，而非全塞进style.css
@use，而在于构建工具是否真把那份样式隔离进了对应页面的 chunk——哪怕 Sass 编译正确，配置漏一项，CSS 就还是会全局加载。 
