Dart SASS废弃@import后，多客户端场景下复用SASS局部文件的解决方案咨询
我完全懂你现在的困扰——之前用@import的时候，给不同客户端定义专属变量再引入公共样式的方式太顺手了，结果Dart SASS要废弃这个写法，加上换IDE、升级依赖的刚需，30个项目要同步改造，换成@use又找不到全局传变量的路子，转CSS变量又怕最终文件体积膨胀，确实头大。
下面给你几个实际能用的解决方案，都是我自己或者同行在多客户端复用场景里验证过的：
方案1：用@use的with参数传递（最推荐，纯SASS预编译）
这是Dart SASS官方主推的替代方案，完全在预编译阶段处理，不会像CSS变量那样增大最终输出的CSS体积，完美匹配你之前的业务逻辑。
你只需要把公共的styles.scss改成模块化结构，先定义默认变量，再让客户端文件通过with来覆盖这些默认值：
- 先重构公共样式文件（推荐改成下划线开头的局部文件
_styles.scss，符合Sass模块化规范）：
// _styles.scss // 定义默认变量，加!default标记允许被外部覆盖 $brandColor: black !default; $font: sans-serif !default; body { color: $brandColor; font-family: $font; } // 其他公共样式逻辑都写在这里
- 然后客户端文件这么写：
// client1.scss @use 'styles' with ( $brandColor: red, $font: Arial );
// client2.scss @use 'styles' with ( $brandColor: blue, $font: Verdana );
这种方式和你之前@import的逻辑几乎一致，预编译后生成的CSS和之前完全一样，没有额外体积负担。如果公共样式里变量很多，还可以把默认变量单独抽成_defaults.scss模块，让客户端先引入自定义变量，再统一传递给公共样式，结构会更清晰。
方案2：用混合宏（Mixin）封装公共样式
如果你的公共样式逻辑比较复杂，比如有大量需要根据变量做分支判断的组件样式，用混合宏封装会更灵活：
- 公共模块
_styles.scss：
// _styles.scss @mixin client-core-styles($brandColor, $font) { body { color: $brandColor; font-family: $font; } // 比如根据品牌色生成按钮、导航栏的关联样式 .btn-primary { background-color: $brandColor; border-color: darken($brandColor, 10%); } }
- 客户端文件调用：
// client1.scss @use 'styles'; @include styles.client-core-styles(red, Arial);
同样是预编译阶段处理，不会增加最终CSS体积，还能灵活扩展样式逻辑。
方案3：折中用CSS变量（仅适合需动态切换的场景）
如果你的项目里有客户端需要在浏览器端动态切换样式的刚需，那CSS变量是没办法的办法，但可以通过Sass预编译优化体积：只把需要动态变化的变量转成CSS变量，其他固定样式依然用Sass变量预编译。
比如：
// _styles.scss $font-fallback: sans-serif !default; // 仅把品牌色设为CSS变量，其他固定值用Sass变量 :root { --brand-color: #{$brandColor}; } body { color: var(--brand-color); font-family: $font, $font-fallback; }
这样最终CSS里只有少量CSS变量，体积增加的幅度会被控制到最小。
批量改造的小技巧
你有30个项目要改，手动逐个调整太耗时间，可以试试：
- 用正则表达式批量替换：比如把客户端文件里的
$xxx: xxx; @import 'styles'结构，批量替换成@use 'styles' with ($xxx: xxx);（多变量的情况可以调整正则逻辑，或者分批次替换） - 把公共的默认变量、模块结构抽成一个基础模板，直接复制到各个项目，再微调客户端的变量值
最后说句实在的，Dart SASS废弃@import其实是为了更规范的模块化，初期改造确实麻烦，但改完之后项目的样式结构会清晰很多，后续维护也会省心不少。
内容来源于stack exchange
