在Nx单体仓库中实现应用到库的SASS变量共享方案咨询

针对你在Nx迁移中遇到的「多应用独立主题+共享UI库访问对应变量」的问题，以下是几种落地性强的解决方案：

方案1：应用级stylePreprocessorOptions注入 #

Nx允许为每个应用单独配置Sass预处理器的全局变量注入，无需在UI库中硬编码路径，确保变量作用域锁定在当前应用：

1. 打开目标应用的project.json（Angular项目为angular.json），找到build -> options -> stylePreprocessorOptions字段，添加应用的变量文件路径：

{
  "build": {
    "options": {
      "stylePreprocessorOptions": {
        "includePaths": ["apps/app-theme-light/src/styles"],
        "additionalData": "@import 'style-variables.scss';"
      }
    }
  }
}

• includePaths：告诉Sass预处理器去哪里找变量文件
• additionalData：自动在所有Sass文件（包括依赖库的）顶部注入变量引用

2. UI库的组件样式中直接使用变量即可，无需手动import：

.button {
  background-color: $primary-color;
  color: $text-color;
}

每个应用的project.json配置独立的stylePreprocessorOptions，构建时会自动加载对应应用的变量，完全隔离主题作用域。

方案2：主题桥接库+应用覆盖 #

通过一个基础主题库做中间层，让UI库依赖通用变量名，应用层再替换为专属值：

1. 创建一个theme-base库，存放默认Sass变量：

// libs/theme-base/src/_variables.scss
$primary-color: #ffffff !default;
$text-color: #000000 !default;

2. UI库ui-components中引入这个基础库的变量：

// libs/ui-components/src/lib/button/button.scss
@import '@gx/theme-base/variables';

.button {
  background-color: $primary-color;
  color: $text-color;
}

3. 每个应用在全局样式中覆盖默认变量：

// apps/app-theme-dark/src/styles/style-variables.scss
@import '@gx/theme-base/variables';

$primary-color: #1a1a1a;
$text-color: #ffffff;

同时在应用的project.json中配置additionalData注入这个覆盖后的变量文件，确保UI库使用的是应用的专属值。

方案3：CSS自定义属性替代Sass变量 #

将主题变量转为CSS全局自定义属性，彻底解耦应用与UI库的变量依赖：

1. 应用的全局样式中定义CSS变量：

// apps/app-theme-light/src/styles/style-variables.scss
:root {
  --primary-color: #ffffff;
  --text-color: #000000;
}

2. UI库的Sass样式中直接使用var()引用：

// libs/ui-components/src/lib/button/button.scss
.button {
  background-color: var(--primary-color);
  color: var(--text-color);
}

这种方案不仅支持Nx多应用隔离，还能实现运行时主题切换，适合需要动态换肤的场景。

为什么之前的tsconfig paths无效？ #

tsconfig.compilerOptions.paths是TypeScript的模块解析配置，仅对.ts/.tsx文件生效，Sass预处理器不识别这个配置，所以无法通过该方式引用Sass变量文件。

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