如何在NX Monorepo中创建可跨框架共享的纯CSS库？

要做一个能以@myorg/styles形式引用、支持Angular/React/Vue/Web Components的纯CSS库，核心就是把样式打包成标准npm包，下面是具体实现步骤：

1. 搭好项目基础结构 #

不用复杂脚手架，简单目录结构就能搞定：

@myorg/styles/
├── src/
│   ├── base/          # 基础样式：重置、变量、字体
│   │   ├── reset.css
│   │   ├── variables.css
│   │   └── typography.css
│   ├── components/    # 通用组件样式：按钮、卡片等
│   │   ├── button.css
│   │   └── card.css
│   └── main.css       # 入口文件，导入所有子样式
├── package.json
└── README.md

2. 配置package.json核心字段 #

这一步决定包能否被正确识别和安装：

• name直接设为@myorg/styles（前提是已在npm注册myorg组织）
• main指向编译后的入口样式，比如dist/main.css
• files指定要发布的文件，比如["dist/**/*", "src/**/*"]，方便开发者按需引入单个样式文件
• 添加简单构建脚本，把src文件复制到dist目录（用预处理器的话再加编译步骤）：

  "scripts": {
    "build": "mkdir -p dist && cp -r src/* dist/",
    "publish-lib": "npm run build && npm publish --access public"
  }
  

3. 编写样式的注意事项 #

• 用CSS变量统一管理主题、间距等，方便各框架项目按需覆盖：

  /* src/base/variables.css */
  :root {
    --primary: #2563eb;
    --font-size: 16px;
    --gap-sm: 8px;
  }
  

• 类名用通用语义化命名，别用框架专属前缀（比如ng-、react-），比如.btn-primary、.card-container，确保所有框架都能直接使用

4. 各框架的引入方式 #

• Angular: 在angular.json的styles数组里添加node_modules/@myorg/styles/dist/main.css，或在组件样式里按需引入：@import '~@myorg/styles/src/components/button.css';
• React: 在项目入口index.js直接导入：import '@myorg/styles/dist/main.css';，也可结合CSS Modules按需加载单个组件样式
• Vue: 在main.js导入全局样式，或在单文件组件的<style>标签里@import '@myorg/styles/src/components/card.css';
• Web Components: 在自定义元素类里通过adoptedStyleSheets加载样式，或在组件模板里添加<link rel="stylesheet" href="@myorg/styles/dist/main.css">

5. 发布与版本管理 #

• 每次更新样式后，遵循语义化版本规则修改package.json的version字段
• 运行npm run publish-lib先构建再发布，注意组织包默认私有，需加--access public才能公开访问

如果之前GitHub工单#54提到过插件，大概率是指预处理器或打包工具插件，但纯CSS库不需要复杂插件，简单文件复制就够。如果用Sass/Less写样式，只需在build脚本里加编译命令，比如sass src/main.scss dist/main.css即可。

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