根本原因是dart sass 1.70+已弃用@import，必须用@use显式引入并加命名空间（如@use "~bootstrap/scss/mixins" as bs; @include bs.media-breakpoint-up()），且vite不识别~别名，需配绝对路径和.scss后缀，同时确保loader顺序正确、文件编码为utf-8无bom。
第三方 SCSS 库的 mixin 报 Undefined mixin，根本不是你写错了名字，而是它压根没被加载进当前编译作用域——Dart Sass 的模块系统不会自动“全局注入”，@import 已失效，@use 才是唯一可靠路径。
为什么 @import "~bootstrap/scss/mixins" 不再起作用
Dart Sass 1.70+ 彻底弃用 @import，所有变量、mixin、函数都必须通过 @use 显式引入并绑定命名空间。即使路径正确、文件存在，@import 也只会静默跳过，不报错但也不可用。
- 旧写法：
@import "~bootstrap/scss/mixins"; @include media-breakpoint-up(md) { ... }→ 编译时找不到media-breakpoint-up - 新写法：
@use "~bootstrap/scss/mixins" as bs; @include bs.media-breakpoint-up(md) { ... }→ 必须带命名空间前缀 - Vite 或 Vue CLI 配置中用
additionalData注入@import同样无效，Dart Sass 直接忽略
路径解析失败：~ 在 Vite 中根本不管用
Vite 默认不识别 ~ 前缀，它不是 Webpack，没有 webpackImporter 机制。直接写 @use "~bootstrap/scss/mixins" 会报 Can't find stylesheet to import。
- 正确做法：改用别名 + 绝对路径，例如
@use "@/node_modules/bootstrap/scss/mixins" as bs; - 前提：确保
vite.config.ts中已配置别名resolve.alias指向node_modules（如{ "@node_modules": path.resolve(__dirname, "node_modules") }） - 路径必须带
.scss扩展名：@use "@/node_modules/bootstrap/scss/mixins.scss" as bs;，省略后缀在@use下大概率失败
构建工具干扰：postcss-loader 或 css-loader 提前介入
如果构建链路中 postcss-loader 出现在 sass-loader 之前，Sass 还没解析 @use 和 @include，PostCSS 就把原始字符串当普通 CSS 处理了，后续编译直接丢失 mixin 逻辑。
- Webpack 用户：检查
module.rules中sass-loader是否排在postcss-loader之后 - Vite 用户：默认顺序正确，但若手动加了
css.postcss配置，需确认未覆盖预处理器执行时机 - 文件编码含 BOM 或零宽空格也会导致
@use解析失败，建议用 VS Code “Save with Encoding” → UTF-8 无 BOM
调用时漏掉命名空间或拼写不一致
@use 引入后，所有 mixin 都必须通过命名空间调用，且大小写、连字符、下划线必须与源文件导出完全一致——Bootstrap 的 media-breakpoint-up 不能写成 mediaBreakpointUp 或 media_breakpoint_up。
- 查看源文件导出方式：打开
node_modules/bootstrap/scss/mixins/_breakpoints.scss，确认 mixin 是@mixin media-breakpoint-up而非@mixin mediaBreakpointUp - 别名用
as *可以扁平化导入，但有风险：@use "~bootstrap/scss/mixins" as *;→@include media-breakpoint-up(...)；前提是该文件未导出同名冲突项 - 多个库混用时（如 Bootstrap + Susy），避免都用
as *，否则 mixin 名称会相互覆盖
真正容易被忽略的是：Dart Sass 不会告诉你“这个 @use 没生效”，它只会在调用时报 Undefined mixin，而你可能还在检查拼写。先确认 @use 语句本身是否被成功解析——在同一个文件里加一行 @debug "loaded";，看控制台是否输出；没输出，说明 @use 根本没跑完，问题一定出在路径、编码或 loader 顺序上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
