Nx可发布样式库执行build命令未包含SCSS文件如何解决？

错误原因 #

你遇到的报错是因为Nx Angular类型库默认使用的@nrwl/angular:package（底层基于ng-packagr）构建器的schema本身不支持stylePreprocessorOptions、styles这类配置，这些配置仅适用于应用类型项目使用的应用构建器，和官方文档的说明并不冲突，官方文档中对应的配置说明覆盖了工作区所有类型的构建器，不同构建器支持的配置字段本身存在差异。

无webpack的解决方案 #

方案1：仅发布SCSS源码（下游自行编译） #

直接在库的构建配置（angular.json或project.json中project/{{lib-project}}/architect/build/options节点）添加ng-packagr支持的assets配置，将SCSS源文件直接复制到dist目录：

"assets": [
  "src/style-paths",
  // 其他存放SCSS文件的目录按需添加
  "src/styles"
]

配置完成后执行nx build {{lib-project}}，对应SCSS文件会被完整复制到dist目录下，可直接发布。

方案2：预编译CSS+附带SCSS源码同时发布 #

如果需要提前编译好CSS供下游直接使用，可通过Nx内置的执行器新增SCSS编译流程，无需引入webpack：

1. 在库的构建配置中新增compile-scss执行节点：

"compile-scss": {
  "executor": "@nrwl/workspace:run-commands",
  "options": {
    "command": "sass src/styles:dist/{{lib-project}}/styles --style compressed --load-path src/style-paths"
  }
}

2. 修改原有build节点配置，添加前置依赖：

"build": {
  "executor": "@nrwl/angular:package",
  "dependsOn": ["compile-scss"],
  // 保留原有其他配置不变
  "options": {
    "assets": [
      "src/style-paths",
      "src/styles"
    ],
    // 其他原有配置
  }
}

3. 在库根目录的package.json中配置样式入口，方便下游引用：

{
  "style": "styles/index.css",
  "scss": "styles/index.scss",
  "exports": {
    "./styles": "./styles/index.css",
    "./scss": "./styles/index.scss"
    // 其他需要暴露的样式路径可按需新增
  }
}

配置完成后执行nx build {{lib-project}}，会自动完成SCSS编译、文件拷贝、打包全流程，生成的dist目录产物可直接发布到npm。

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