如何实现Angular组件库中SCSS变量的外部自定义覆盖

要让消费应用可以覆盖你库内的SCSS变量，按以下两步配置即可：

第一步：调整库端配置 #

• 给所有需要支持覆盖的SCSS变量添加!default标记，这个标记的作用是：如果使用者没有定义同名变量，就用你设置的默认值，否则优先使用使用者定义的变量。调整后的dinotable.scss内容如下：

// lib\dinotable.scss
$primary-color: green !default;
$secondary-color: red !default;

• 配置库打包规则，把这个SCSS文件作为公共资源暴露给使用者：
  1. 在库的ng-package.json中添加assets配置，确保打包时会把该SCSS文件输出到dist目录：

  {
    "assets": ["./lib/dinotable.scss"],
    // 其余原有配置保持不变
  }
  

  2. 在库的package.json中添加导出规则，方便使用者直接导入样式：

  {
    "exports": {
      "./dinotable-styles": {
        "sass": "./dinotable.scss"
      }
    },
    // 其余原有配置保持不变
  }
  

配置完成后重新打包你的库即可。

第二步：使用者侧操作 #

消费应用要覆盖变量时，只需要在自己项目的全局样式文件（通常是src/styles.scss）中，先定义同名变量，再导入库暴露的SCSS文件即可，示例如下：

// 先自定义变量
$primary-color: #1890ff;
$secondary-color: #ff4d4f;
// 再导入库的样式文件，@后面替换为你实际的库包名即可
@import "@你的库包名/dinotable-styles";

如果需要在组件级样式中也用到这些变量，可以在angular.json中配置样式预处理器的包含路径，就不用每次都写全导入路径。

内容的提问来源于stack exchange，提问作者Chriso Lopez