sass的@mixin仅在编译时生效，必须全程处于sass编译流程中（如.scss文件或），若中途进入纯css环境（如直接link .css或lang="css"），则@mixin无法解析，仅作文本搬运，不执行任何编译逻辑。
因为原生 CSS 根本不支持混合宏（@mixin）语法，@import 只是把内容原样拼进去，不会执行任何 Sass 编译逻辑。
普通 CSS 的 @import 是纯文本搬运工
你在 CSS 文件里写 @import "variables.css"，浏览器就按字面意思去请求并插入那串文本——它不会识别 $color-primary，也不会展开 @mixin button-base。Sass 的变量、混合宏、函数这些，只在 Sass 编译阶段起作用，一旦输出成 CSS，就彻底消失了。
- 即使被 import 的文件名是
.scss，只要它被当作 CSS 加载（比如直接 link 到 HTML），就不会触发 Sass 编译 -
@import在 CSS 里是阻塞式同步加载，没有作用域、没有条件、不能复用逻辑 - 你看到的
var(--color)能跨文件生效，靠的是浏览器的自定义属性机制，不是@import的能力
@use 和 @import 都只能在 Sass 文件里用
只有当你在 .scss 文件中使用 @use "button" 或 @import "button"，Sass 编译器才会解析 _button.scss 里的 @mixin，并把它展开进最终生成的 CSS 中。这个过程发生在构建时，不是运行时。
-
@use要求目标文件是合法 Sass 模块（.scss或.sass），且不能是纯 CSS 内容 -
@import "xxx.css"在 Sass 中会直接转成@import url("xxx.css")，不会内联解析 - 想让混合宏“可用”，必须确保整个调用链都在 Sass 编译流程内，不能中途切到纯 CSS 环境
常见误操作：以为加了 .scss 后缀就能混用
比如你新建一个 mixins.css，改成 mixins.scss，里面只写 @mixin flex-center { ... }，然后在另一个 CSS 文件里 @import "mixins.scss" —— 这依然无效。因为那个“另一个 CSS 文件”没经过 Sass 编译器处理。
- 后缀只是文件标识，关键看谁在读它：Webpack/Vite 用
sass-loader处理.scss，浏览器只认.css - Vue 单文件组件中的
<style lang="scss"></style>才会触发 Sass 编译；lang="css"下的@import就是原生行为 - 如果用
unplugin-vue-components自动导入组件样式，也要确认它是否把.scss当作 Sass 处理，而不是当成普通文本塞进去
真正容易被忽略的一点：混合宏不是“定义即可用”，它依赖编译时的作用域注入。脱离 Sass 编译上下文，哪怕语法一模一样，也只是一个被忽略的注释。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
