为什么CSS在Sass模块化后@mixin无法直接调用，如何处理？

根本原因是@mixin未进入当前编译作用域，@use "mixins"后必须用mixins.button()调用；若用as *可省略前缀但易冲突，且每个需调用的文件都须独立@use。

@mixin 无法直接调用，根本不是语法写错了，而是它压根没进编译作用域——Sass 不会自动“发现”未被显式引入的 mixin。

为什么 @use 后还是报 Undefined mixin？

你写了 @use "mixins"，但 @include button() 仍报错，大概率是命名空间没对上。

1. @use "mixins" 后，必须写 @include mixins.button()（默认带命名空间）
2. 想省略前缀，得加 as *：@use "mixins" as *，但不推荐——易引发冲突
3. 如果 mixins.scss 里用了 @forward "shared" show .button，而你 @use "mixins" 却没 forward 成功，button 就不会暴露出来
4. @use 只在当前文件生效，子模块不会继承父模块的 @use，每个需要调用的 .scss 文件都得自己 @use

为什么 @import 还是找不到 mixin？

@import 在 Dart Sass 中已被标记为 legacy，行为和 Less 的 @import 不同：它会把整个文件内容提升到顶层作用域，但若路径错误、后缀遗漏（如写成 @import "mixins" 而不是 @import "mixins.scss"），就会静默失败。

1. 确保路径正确且带后缀：@import "./mixins.scss"（相对路径要以 . 开头）
2. @import 不支持 pkg: 协议，不能像 @use 'pkg:sass-true' 那样导入 npm 包
3. 多个 @import 存在时，顺序敏感：后导入的变量/mixin 会覆盖前面的，且无警告

Vue / Vite 项目中全局混入失效的典型场景

你在 vite.config.ts 里配了 css.preprocessorOptions.scss.additionalData 全局注入变量，但 @mixin 依然调用不了——因为 additionalData 只注入变量和函数，不注入 @mixin。

1. 全局混入必须通过 @use 或 @import 显式加载，不能靠 additionalData 自动挂载
2. 单文件组件里 <style lang="scss"> 才触发 Sass 编译；lang="css" 下的 @import 是原生 CSS 行为，@mixin 直接被当注释忽略
3. 使用 unplugin-vue-components 自动导入样式时，确认它是否把 .scss 文件交给 sass 处理，而不是当成纯文本插入

怎么验证 mixin 真正可用？

别只看有没有报错，要检查最终生成的 CSS 是否含对应规则。最稳妥的验证方式是：在目标选择器内写一个最简 @include，并确保该文件参与构建链路。

1. 新建测试文件 _test.scss：@use "mixins"; .test { @include mixins.button(red); }
2. 确保这个文件被主入口（如 main.scss）通过 @use 或 @import 引入
3. 检查编译输出的 CSS 是否含 .test { background: red; } —— 没有就说明 mixin 没走通
4. 注意：如果 mixins.scss 本身只定义 @mixin、没 @include 也没变量引用，某些构建工具（如旧版 sass-loader）可能跳过编译该文件

真正容易被忽略的一点：mixin 不是“定义即注册”，它依赖编译时的模块解析路径 + 显式导入 + 正确命名空间三者同时成立。少一个环节，浏览器看到的就只是空白。