CSS Modules 中 @import Sass 文件不生效，因原生 @import 不触发 Sass 编译，变量/mixin/占位符均失效；必须用 + @use 显式引入并带命名空间。
为什么直接 @import Sass 文件在 CSS Modules 里不生效
因为 CSS Modules 只处理 <style module></style> 标签内的内容，而原生 @import 会把外部 Sass 文件当作普通 CSS 引入——变量、@mixin、%placeholder 全部被忽略，编译后只剩空规则或报错。
常见错误现象：@import "_variables.scss" 后，$primary 在组件样式里仍提示 "Undefined variable"；或者 @include flex-center 报错 "Unknown mixin"。
- 必须用构建工具支持的 Sass 预处理器链路（如 Vite 的
vite-plugin-sass或 Webpack 的sass-loader） -
<style lang="scss" module></style>是硬性前提，漏掉lang="scss"就等于没走 Sass 编译 - 所有依赖的 Sass 功能（变量、mixins、functions）必须通过
@use显式引入，不能靠@import“注入”全局作用域
@use + 命名空间是唯一可靠路径
@use 让 Sass 模块具备作用域隔离能力，正好匹配 CSS Modules 的组件级封装逻辑。它不会污染全局，也不会因加载顺序错乱导致变量未定义。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把公共样式拆成
_variables.scss、_mixins.scss、_placeholders.scss等局部文件（以下划线开头） - 在组件 SCSS 中统一用
@use "@/styles/variables" as v;，之后写color: v.$primary; - mixins 必须定义在被
@use的文件中，且调用时带命名空间：@include m.flex-center;（假设@use "@/styles/mixins" as m;） - 禁止在
@use后用with覆盖变量（如@use "variables" with ($primary: red)），这会破坏设计系统一致性
如何让 %placeholder 在 CSS Modules 中被 @extend 正确识别
%placeholder 不输出 CSS，只供 @extend 使用。但在 CSS Modules 下，@extend 无法跨模块隐式访问——即使你 @use 了定义它的文件，Sass 默认也不导出占位符。
关键步骤：
- 在
_placeholders.scss末尾加@forward ".";或显式@forward "." show %reset, %text-center; - 组件中先
@use "@/styles/placeholders" as p;，再写@extend p.%reset; - 不要在嵌套选择器里
@extend，比如.card > .header { @extend p.%text-sm; }会导致生成冗余长选择器，反而增大体积 - 优先用
@include替代@extend：CSS Modules 本意是隔离，@extend合并选择器会削弱这一特性，容易引发权重不可控问题
复用工具类时，别混淆 CSS Modules 和原子类语义
像 .mt-2、.text-center 这类原子类，本质是全局工具，和 CSS Modules 的“组件私有”原则冲突。强行塞进 <style module></style> 会导致哈希化（如 mt-2_abc123），失去复用价值。
更合理的做法：
- 保留一份全局
utils.css（纯 CSS，无 Sass 特性），用<link rel="stylesheet">在 HTML 中引入 - 在组件中通过
:global(.mt-2)显式穿透使用，避免哈希化：<div class=":global(mt-2) card-content"> <li>如果坚持全 Sass + Modules 方案，就用 <code>@use引入工具类 mixins，例如@include u.margin-top(0.5rem);，但要注意命名别和平台工具类重复
真正容易被忽略的是：CSS Modules 的哈希机制和 Sass 的 @extend 天然互斥——前者靠类名隔离，后者靠选择器合并。混用时若没理清作用域边界，编译后的 CSS 既臃肿又难调试。
