Nx构建Angular库时未包含SCSS文件的问题排查

核心问题分析 #

当前配置存在几个关键错误：

• project.json 中assets和style配置位置错误，未被ng-packagr正确识别
• tsconfig.lib.json 错误地将SCSS文件纳入TypeScript编译范围
• package.json 中style字段路径错误，且sideEffects配置可能导致样式被树摇移除

修正后的配置文件 #

1. project.json #

调整build目标的assets配置，将SCSS文件作为资源正确纳入打包流程，移除无效配置：

{
  "name": "build-lib",
  "$schema": "../node_modules/nx/schemas/project-schema.json",
  "projectType": "library",
  "sourceRoot": "libs/build-lib/src",
  "targets": {
    "build": {
      "executor": "@nrwl/angular:ng-packagr-lite",
      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
      "options": {
        "project": "libs/build-lib/ng-package.json",
        "assets": [
          {
            "glob": "**/*.scss",
            "input": "libs/build-lib/src",
            "output": "./"
          }
        ]
      },
      "configurations": {
        "production": {
          "tsConfig": "libs/build-lib/tsconfig.lib.prod.json"
        },
        "development": {
          "tsConfig": "libs/build-lib/tsconfig.lib.json"
        }
      },
      "defaultConfiguration": "production"
    },
    "test": {
      "executor": "@nrwl/jest:jest",
      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
      "options": {
        "jestConfig": "libs/build-lib/jest.config.ts",
        "passWithNoTests": true
      },
      "configurations": {
        "ci": {
          "ci": true,
          "codeCoverage": true
        }
      }
    },
    "lint": {
      "executor": "@nrwl/linter:eslint",
      "outputs": ["{options.outputFile}"],
      "options": {
        "lintFilePatterns": ["libs/build-lib/**/*.ts", "libs/build-lib/**/*.html"]
      }
    }
  },
  "tags": []
}

关键修改点：

• 将assets配置移至build.options下，明确匹配所有SCSS文件，从src目录复制到产物根目录
• 移除顶层无效的style和assets字段，以及build目标下的style配置块

2. package.json #

修正style字段路径，调整sideEffects避免样式被树摇：

{
  "name": "@build-lib",
  "version": "0.0.1",
  "peerDependencies": {
    "@angular/common": "^15.1.0",
    "@angular/core": "^15.1.0"
  },
  "dependencies": {
    "tslib": "^2.3.0"
  },
  "sideEffects": [
    "*.scss"
  ],
  "style": "index.scss"
}

关键修改点：

• style字段改为打包后的相对路径index.scss（对应产物目录下的文件）
• sideEffects指定SCSS文件，防止webpack在生产构建中移除未被直接导入的全局样式

3. tsconfig.lib.json #

移除SCSS文件的include配置，TypeScript不处理样式文件：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../../../dist/out-tsc",
    "declaration": true,
    "declarationMap": true,
    "inlineSources": true,
    "types": []
  },
  "exclude": ["src/test-setup.ts", "src/**/*.spec.ts", "jest.config.ts", "src/**/*.test.ts"],
  "include": ["src/**/*.ts"]
}

关键修改点：

• 从include中移除"src/**/*.scss"，避免TypeScript尝试编译非TS文件

额外补充：ng-package.json配置 #

如果库有全局样式需要被ng-packagr处理，可在ng-package.json中添加assets配置（与project.json的assets作用一致，二选一即可）：

{
  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../../dist/libs/build-lib",
  "lib": {
    "entryFile": "src/index.ts"
  },
  "assets": [
    "src/**/*.scss"
  ]
}

内容的提问来源于stack exchange，提问作者Paul F.