如何基于@use模块结构重写SASS/SCSS库函数？

核心原因 #

Sass的@use是模块化导入机制，每个模块拥有独立作用域与命名空间。组件库内部调用的theming.get-color-from-palette()，指向的是库自身模块中的函数，你后加载的自定义文件无法直接覆盖这个内部引用。

可行方案 #

方案1：自定义模块转发+全局替换导入路径 #

1. 创建自定义custom-theming.scss文件，转发原库模块并覆盖目标函数：

// 转发原库theming模块，隐藏需要重写的函数
@forward '../core/theming/theming' hide get-color-from-palette;

// 重写目标函数，可复用原库逻辑（通过命名空间调用）
@function get-color-from-palette($palette, $hue) {
  // 自定义逻辑示例
  @if $hue == 'thumb-checked' {
    return #ff4081;
  } @else {
    @return theming.get-color-from-palette($palette, $hue);
  }
}

2. 在项目所有引用theming的地方，替换原库的@use '../core/theming/theming'为@use './custom-theming' as theming。如果是第三方npm组件库，可通过Webpack/Vite等构建工具的路径别名，将库的theming模块路径指向你的自定义文件，强制所有导入使用你的模块。

方案2：利用组件库的主题扩展钩子（若提供） #

多数UI组件库（如Angular Material）自带主题扩展机制，无需直接重写底层函数：

@use '../core/theming/theming';
@use '../core/theming/palette';

// 自定义调色板
$custom-primary: palette.define-palette(palette.$pink-palette, 500);
$custom-theme: theming.define-light-theme((
  color: (
    primary: $custom-primary,
  )
));

// 单独覆盖滑动开关的选中样式
@mixin custom-slide-toggle-theme($theme) {
  $primary-palette: theming.get-color-from-palette(theming.get-theme-color($theme, primary), 600);
  
  .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
    background-color: $primary-palette;
    // 或直接写自定义颜色逻辑
  }
}

// 应用主题时注入自定义样式
@include theming.all-component-themes($custom-theme);
@include custom-slide-toggle-theme($custom-theme);

方案3：临时兼容方案（使用@import） #

若上述方案无法落地，可临时用@import替代@use（注意：Sass计划逐步淘汰该语法）。@import为全局作用域，后导入的函数会覆盖之前的定义：

// 先导入库的theming文件
@import '../core/theming/theming';

// 重写目标函数
@function get-color-from-palette($palette, $hue) {
  // 自定义逻辑
}

// 再导入库的组件样式文件
@import '../core/slide-toggle/slide-toggle';

该方式会污染全局作用域，可能引发命名冲突，仅作为临时过渡方案。

内容的提问来源于stack exchange，提问作者Ravi Anand