NX Angular项目：Libs引用App的SCSS变量生产构建失败求助

问题场景 #

我正在开发NX + Angular项目，目标实现多客户端样式共享，项目结构如下：

├── apps
│   ├── client-a
│   │   ├── src
│   │   │   ├── **/*
│   │   │   ├── style
│   │   │   │   ├── import.scss
│   │   │   │   ├── color.scss
│   │   │   │   ├── typo.scss
│   ├── client-b
│   │   ├── src
│   │   │   ├── **/*
│   │   │   ├── style
│   │   │   │   ├── import.scss
│   │   │   │   ├── color.scss
│   │   │   │   ├── typo.scss
├── libs
│   ├── auth
│   │   ├── **/**
│   ├── store
│   │   ├── **/**
│   ├── product
│   │   ├── **/**

每个libs模块有自身样式，但核心需求是：构建client-a时，libs自动使用client-a定义的颜色、排版变量；构建client-b时同理，让libs在保留默认样式的同时适配各客户端的定制变量。

我在每个App的project.json中添加了以下配置适配开发环境：

{
  "name": "client-a",
  [...]
  "targets": {
    "build": {
      "executor": "@angular-devkit/build-angular:browser",
      "outputs": ["{options.outputPath}"],
      "options": {
        [...]
        "stylePreprocessorOptions": {
          "includePaths": [
            ".",
            "apps/client-a/src"
          ]
        }
      },
    }
  }
}

执行npx nx run clienta:serve --configuration=development时编译正常，但执行npx nx run clienta:build --configuration=production时构建失败。需要解决该问题，让Libs模块可以通过@import 'style/import.scss'引用对应App的./apps/{client}/src/style目录下的文件。

解决方案 #

1. 同步production配置的样式预处理器路径 #

生产构建的configuration.production节点可能未继承基础options中的stylePreprocessorOptions，需要显式配置该选项：

{
  "name": "client-a",
  [...]
  "targets": {
    "build": {
      "executor": "@angular-devkit/build-angular:browser",
      "outputs": ["{options.outputPath}"],
      "options": {
        [...]
        "stylePreprocessorOptions": {
          "includePaths": [
            ".",
            "apps/client-a/src"
          ]
        }
      },
      "configurations": {
        "production": {
          [...]
          "stylePreprocessorOptions": {
            "includePaths": [
              ".",
              "apps/client-a/src"
            ]
          }
        }
      }
    }
  }
}

2. 使用工作区根路径的绝对引用格式 #

将includePaths改为基于工作区根的路径，避免生产构建时的路径解析差异：

"stylePreprocessorOptions": {
  "includePaths": [
    "./",
    "./apps/client-a/src"
  ]
}

libs中的scss文件保持@import 'style/import.scss'的写法即可，预处理器会从配置的路径中查找对应文件。

3. 清理NX构建缓存 #

生产构建失败可能和缓存冲突有关，先清理缓存再重新构建：

npx nx reset

然后执行生产构建命令：

npx nx run client-a:build --configuration=production

4. 为libs添加变量 fallback 机制 #

在libs的样式文件中，优先导入客户端变量，若无法找到则使用自身默认变量，避免构建报错：

// libs/auth/src/lib/auth.component.scss
@use 'style/color.scss' as client-colors;
@use './default-colors.scss' as default-colors;

// 优先使用客户端变量，无则用默认值
$primary-color: client-colors.$primary-color !default default-colors.$primary-color;

5. 全局配置各客户端样式路径（可选） #

若多个客户端结构一致，可在nx.json中统一配置各客户端的样式预处理器路径：

// nx.json
{
  "projects": {
    "client-a": {
      "targets": {
        "build": {
          "options": {
            "stylePreprocessorOptions": {
              "includePaths": ["./apps/client-a/src"]
            }
          }
        }
      }
    },
    "client-b": {
      "targets": {
        "build": {
          "options": {
            "stylePreprocessorOptions": {
              "includePaths": ["./apps/client-b/src"]
            }
          }
        }
      }
    }
  }
}

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