如何在Nx集成式单体仓库生成CSS、SASS与原生JS类库？

完全可以在Nx集成式单体仓库中创建这类非Angular专属的类库，并且完美适配Module Boundaries机制，具体步骤如下：

一、生成目标类库 #

使用Nx的通用类库生成命令，无需局限于Angular专属的生成器：

1. 生成原生JS工具类库（util标签） #

执行以下命令创建纯JS的util库，可指定标签、测试框架等参数：

nx generate @nx/js:library shared-util --tags=type:util --unitTestRunner=jest --bundler=rollup

• shared-util是你的库名称，可按需修改
• --tags=type:util给库打上标识，用于后续Module Boundaries约束
• 若不需要单元测试，可将--unitTestRunner设为none

2. 生成纯CSS/SASS组件库（ui标签） #

同样用JS库生成器创建，专注于样式资源：

nx generate @nx/js:library shared-ui --tags=type:ui --unitTestRunner=none

创建完成后，在库的src/lib目录下新建styles文件夹存放.scss或.css文件，并在库的package.json中配置导出规则，方便其他项目引用：

{
  "exports": {
    "./styles": "./src/lib/styles/index.scss"
  }
}

二、配置Module Boundaries约束 #

利用Nx的标签规则实现依赖边界管控，修改nx.json文件：

1. 确保每个库的tags字段已正确设置（生成时指定的标签会自动同步到nx.json）
2. 在nx.json的plugins节点下添加@nx/enforce-module-boundaries规则：

{
  "plugins": [
    {
      "plugin": "@nx/eslint-plugin",
      "rules": {
        "@nx/enforce-module-boundaries": [
          "error",
          {
            "depConstraints": [
              // feature库可依赖feature、ui、util库
              {
                "sourceTag": "type:feature",
                "onlyDependOnLibsWithTags": ["type:feature", "type:ui", "type:util"]
              },
              // ui库仅能依赖ui或util库
              {
                "sourceTag": "type:ui",
                "onlyDependOnLibsWithTags": ["type:ui", "type:util"]
              },
              // util库只能依赖其他util库
              {
                "sourceTag": "type:util",
                "onlyDependOnLibsWithTags": ["type:util"]
              }
            ]
          }
        ]
      }
    }
  ]
}

三、引用类库 #

• util库：在Angular组件或其他库中直接导入：

import { formatDate } from '@your-workspace/shared-util';

• ui库样式：可在Angular项目的angular.json中全局导入，或在组件的styles数组中局部引用：

@Component({
  styleUrls: ['@your-workspace/shared-ui/styles/button.scss']
})

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