不依赖Bootstrap等框架，如何构建Angular自定义Sass组件库？

嘿，我完全懂这种从零开始的迷茫感——当初我第一次搭自定义组件库的时候，盯着空白的Sass文件发呆了快半小时！别慌，咱们一步步来拆解，从行动方案到结构搭建再到学习资源，都给你理得明明白白。

先别着急写代码，先把规划和基础打牢，不然越写越乱：

• 先定设计系统的基础规范：和团队一起梳理清楚核心设计规则——比如主色/辅助色/中性色的色值、字体层级（字号、字重、行高）、统一的间距刻度（比如4px、8px、16px这种倍数，避免随意写像素值）、圆角、阴影样式。把这些整理成Sass变量，后面所有组件都要基于这些规范来写，保证风格统一。
• 搭建Sass工具层：先写好CSS重置（可以参考Normalize.css的核心逻辑，统一浏览器默认样式），然后创建：
  • _variables.scss：存放所有设计变量（颜色、字体、间距等）
  • _mixins.scss：封装复用的样式逻辑，比如响应式断点、flex布局快捷宏、hover状态的过渡效果
  • _functions.scss：写一些实用函数，比如调整颜色深浅、计算rem值
  • _utilities.scss：全局工具类，比如margin/padding快捷类、文本对齐、隐藏元素的类
• 从原子组件开始攻坚：先从最简单的组件入手（比如按钮、输入框），用Angular CLI生成组件：ng generate component components/button。写组件的时候要注意：
  • 用@Input()让组件支持配置（比如按钮的变体、大小、禁用状态）
  • 用BEM命名规范（比如btn、btn--primary、btn--disabled）避免样式冲突
  • 利用Angular的ViewEncapsulation隔离组件样式，防止污染全局
• 组件封装与复用：每个组件尽量独立，不要依赖其他组件的样式（父子组件除外）。把通用的逻辑（比如表单校验、状态切换）提取成指令或服务，方便多个组件复用。
• 同步做测试与文档：写组件的时候顺便写单元测试（Angular自带Karma/Jasmine），测试组件的输入输出、状态变化。用Storybook搭建组件文档，每个组件写不同状态的示例，方便团队查看和测试。
• 逐步迭代扩展：先完成基础组件（按钮、输入框、卡片、标签），再做复杂组件（模态框、表单组、导航栏），最后做页面级布局组件。每次写完一个组件，和团队review，确保符合设计规范。

给你一个我常用的结构，清晰且易于维护：

your-custom-library/
├── src/
│   ├── lib/
│   │   ├── core/                # 核心基础层
│   │   │   ├── styles/
│   │   │   │   ├── _reset.scss
│   │   │   │   ├── _variables.scss
│   │   │   │   ├── _mixins.scss
│   │   │   │   ├── _functions.scss
│   │   │   │   ├── _utilities.scss
│   │   │   │   └── main.scss    # 统一引入所有基础样式
│   │   │   ├── directives/      # 通用指令（比如自定义防抖点击）
│   │   │   ├── pipes/           # 通用管道（比如数字格式化）
│   │   │   └── services/        # 通用服务（比如主题切换）
│   │   ├── components/          # 原子/分子级UI组件
│   │   │   ├── button/
│   │   │   │   ├── button.component.ts
│   │   │   │   ├── button.component.html
│   │   │   │   ├── button.component.scss
│   │   │   │   └── button.component.spec.ts
│   │   │   ├── input/
│   │   │   ├── card/
│   │   │   └── ...
│   │   ├── layouts/             # 布局组件
│   │   │   ├── container/       # 页面容器
│   │   │   └── grid/            # 栅格系统
│   │   └── your-library.module.ts  # 根模块，导出所有组件/指令/管道
│   └── stories/                 # Storybook组件文档
│       ├── button.stories.ts
│       ├── input.stories.ts
│       └── ...
├── package.json
└── angular.json

• core是整个库的基础，所有组件都会依赖这里的样式和工具
• components按单个组件拆分，每个组件独立成文件夹，方便维护
• layouts用来处理页面级的布局逻辑，比如栅格、容器，让页面排版更高效

这些资源都是我当初入门时反复看的，实用性拉满：

• Angular官方「创建组件库」文档：最权威的入门指南，教你用Angular CLI生成可发布的组件库，步骤详细，适合新手跟着一步步做。
• Sass官方指南：把变量、混合宏、嵌套、继承这些核心特性吃透，写样式的时候会少走很多弯路，官方的示例很接地气。
• 原子化设计（Atomic Design）核心思路：这个设计方法论会帮你理清组件从原子（按钮、输入框）到分子（带标签的输入框）再到组织（表单组）的构建逻辑，让组件库的结构更合理。
• Angular组件封装实战内容：很多前端博主会分享自定义组件的技巧，比如如何用@Input/@Output实现组件的灵活性、如何处理样式隔离、如何封装通用逻辑，这些实战内容比纯文档更直观。
• Storybook官方Angular教程：教你快速搭建组件文档，展示组件的各种状态，方便团队协作和组件测试，对组件库的维护非常有用。

刚开始慢一点没关系，先把基础组件写扎实，每写一个就总结下经验——比如哪些样式可以提取成混合宏，哪些逻辑可以封装成通用指令。慢慢的你就会形成自己的组件库搭建思路啦！

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