如何在Angular库中暴露并使用可自定义SCSS变量？

完全可以实现主应用自定义库组件SCSS变量的需求，下面是两种实用方案：

方案1：使用CSS自定义属性（推荐，简单直接） #

这种方案利用CSS原生的变量特性，运行时就能覆盖，不需要调整库的构建配置：

1. 库中定义CSS变量
   在你的theme.scss里用:root声明全局CSS变量：

   :root {
     --my-component-primary-color: #1976d2;
     --my-component-font-size: 16px;
   }
   

2. 组件样式引用CSS变量
   修改myComponent的SCSS文件，用var()引用这些变量：

   .my-component-container {
     background-color: var(--my-component-primary-color);
     font-size: var(--my-component-font-size);
   }
   

3. 主应用覆盖变量
   在主应用的全局样式文件（比如styles.scss）里重新定义这些变量即可生效：

   :root {
     --my-component-primary-color: #ff5722;
     --my-component-font-size: 18px;
   }
   

方案2：保留SCSS变量，让主应用编译时替换 #

适合依赖复杂SCSS逻辑的场景，需要调整库的构建配置，让主应用参与样式编译：

1. 库中定义带默认值的SCSS变量
   修改theme.scss，给变量加上!default标记，允许后续被覆盖：

   $my-component-primary-color: #1976d2 !default;
   $my-component-font-size: 16px !default;
   

2. 组件导入变量文件
   在myComponent的SCSS文件里导入theme.scss：

   @import '../theme.scss';
   
   .my-component-container {
     background-color: $my-component-primary-color;
     font-size: $my-component-font-size;
   }
   

3. 调整库的构建配置
   修改库的ng-package.json，确保样式文件不被提前编译成静态CSS，同时导出变量文件：

   {
     "lib": {
       "entryFile": "src/public-api.ts",
       "styleIncludePaths": ["src/lib"],
       "cssUrl": "none"
     },
     "assets": ["./src/lib/theme.scss"]
   }
   

4. 主应用自定义变量并导入库样式
   在主应用的styles.scss里先定义自定义变量，再导入库的变量文件和组件样式：

   // 自定义变量
   $my-component-primary-color: #ff5722;
   $my-component-font-size: 18px;
   
   // 导入库的变量文件（会使用自定义值覆盖默认值）
   @import 'your-library-name/theme.scss';
   // 导入库组件的样式文件
   @import 'your-library-name/lib/my-component/my-component.component.scss';
   

方案对比 #

• CSS变量方案：无需修改库构建配置，主应用直接覆盖，支持运行时动态调整，适合简单样式定制。
• SCSS变量方案：依赖主应用使用SCSS，编译时替换变量，适合需要使用SCSS混合器、函数等复杂逻辑的场景。

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