# @aleph-alpha/config-unocss 中文文档

规范地址：https://npmcn.com/package/%40aleph-alpha/config-unocss/

版本：0\.2\.1
npm 元数据更新时间：2026-10-28T11:38:12.105Z
中文译文更新时间：2026-11-05T22:01:37.887Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40aleph-alpha/config-unocss
原文对照：https://npmcn.com/package/%40aleph-alpha/config-unocss/?lang=original
项目主页：https://docs.aleph-alpha.com/

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：31.1 kB，5 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：6 个
- 首次发布：2026-06-18T14:20:27.146Z
- 最新版本发布：2026-08-10T14:15:48.563Z
- 近 30 天下载量：14291（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：2（近 12 个月 2 个）

## 中文简介

Aleph Alpha 前端的共享 UnoCSS预设. 再导出设计-系统符号预设,网页字体预设,以及帮助者.

## 安装

```sh
npm install @aleph-alpha/config-unocss
```

也可以使用：`pnpm add @aleph-alpha/config-unocss`、`yarn add @aleph-alpha/config-unocss`、`bun add @aleph-alpha/config-unocss`

## README

## 配置 UnoCSS

_@aleph-alpha/ config-unocss (英语)_

Aleph Alpha 前端的共享 UnoCSS预设. 套装设计-系统令牌预设,web-fonts预设,以及内容-管道帮助器,这样每个应用程序和库都可以共享一个UnoCSS配置.

设计标志本身就住在 [`@aleph-alpha/config-tokens`](https://npmcn.com/package/%40aleph-alpha/config-tokens/README.md),且嵌入式网络字体在 [`@aleph-alpha/config-fonts`](https://npmcn.com/package/%40aleph-alpha/config-fonts/README.md);此软件包既消耗了两者,又将其暴露为UnoCSS预设.

### 安装

```bash
pnpm add -D @aleph-alpha/config-unocss
```

### 应用程序的使用

大多数应用程序只需要:

```ts
// uno.config.ts
import { defineAppConfig } from '@aleph-alpha/config-unocss';

export default defineAppConfig();
```

`defineAppConfig()` 包装 `defineConfig` 从UnoCSS, 预线 `presetsAlephAlpha()` 和设计-系统内容路径,并曝光用于应用特定扩展的钩.

#### 上层

```ts
import { defineAppConfig } from '@aleph-alpha/config-unocss';

export default defineAppConfig({
  // Extra presets appended after the defaults
  presets: [/* presetMyApp() */],

  // Extra rules — e.g. local workarounds or brand utilities
  rules: [
    ['my-rule', { color: 'red' }],
  ],

  // Theme overrides — merged into the base theme
  theme: {
    breakpoints: { xs: '480px' },
    colors: { 'brand-bg-brand': '#CCE804' },
  },

  // Pull classes out of additional node_modules packages.
  // filesystem and pipeline.include are union-merged with the DS defaults.
  content: {
    filesystem: ['node_modules/@my-org/some-lib/**/*'],
  },

  // Pass-through options — anything `defineConfig` accepts
  shortcuts: { /* ... */ },
  safelist: [/* ... */],
  transformers: [/* ... */],
});
```

#### 手动编译( 图书馆、 高级应用程序)

```ts
import { defineConfig } from 'unocss';
import { presetsAlephAlpha, getDesignSystemContentPathConfig } from '@aleph-alpha/config-unocss';

export default defineConfig({
  presets: [...presetsAlephAlpha()],
  ...getDesignSystemContentPathConfig('vue'),
});
```

### 来自遗产的移徙 `@aleph-alpha/config-css`

**在此之前** (~11行):

```ts
import {
  getDesignSystemContentPathConfig,
  presetAlephAlpha,
} from '@aleph-alpha/config-css';
import { defineConfig } from 'unocss';

export default defineConfig({
  ...getDesignSystemContentPathConfig('vue'),
  presets: [presetAlephAlpha()],
});
```

**之后** (3行):

```ts
import { defineAppConfig } from '@aleph-alpha/config-unocss';

export default defineAppConfig();
```

拥有自己品牌颜色的Apps通过 `theme` 选项。 您在此列出的颜色在设计- 系统符号上方被深深地浮出水面—— 只有您设定的密钥被覆盖, 其他的符号调色板仍然可用 :

```ts
import { defineAppConfig } from '@aleph-alpha/config-unocss';

export default defineAppConfig({
  theme: {
    colors: {
      'brand-bg-brand': '#CCE804',
      'core-bg-accent': '#555CF9',
    },
  },
});
```

附加UNOCSS预设(如:. `presetTypography`)或变压器(例如. `transformerDirectives` 页:1 `@apply`把它压上 `presets` 财务报告和审定财务报表 `transformers`数字 :

```ts
import { defineAppConfig } from '@aleph-alpha/config-unocss';
import { presetAlephAlphaIcons } from '@aleph-alpha/ds-icons';
import { presetTypography, transformerDirectives } from 'unocss';

export default defineAppConfig({
  presets: [presetAlephAlphaIcons(), presetTypography()],
  theme: {
    breakpoints: { xs: '480px', sm: '640px', md: '768px', lg: '1024px' },
    colors: { 'brand-bg-brand': '#CCE804' },
  },
  transformers: [transformerDirectives()],
});
```

包裹主题的 Apps 在自己的预设中覆盖(`definePreset`保持这种模式不变—— `defineAppConfig` 接受在默认情况下预设的 UnoCSS :

```ts
import { defineAppConfig } from '@aleph-alpha/config-unocss';
import { presetAlephAlphaIcons } from '@aleph-alpha/ds-icons';
import { definePreset } from 'unocss';

const presetMyAppTheme = definePreset(() => ({
  name: 'my-app-theme',
  theme: { colors: { 'core-bg-primary': '#FBFBFD' } },
}));

export default defineAppConfig({
  presets: [presetAlephAlphaIcons(), presetMyAppTheme()],
});
```

带有本地工作环的应用程序(如:特定符号的α-hex修正、年龄较大的间隔预设shims) `ds-components-vue` (各版本)保持本地化,并通过 `presets` 或者说 `rules`数字 :

```ts
import { defineAppConfig } from '@aleph-alpha/config-unocss';
import { alphaFixRules } from './local-alpha-fix';

export default defineAppConfig({
  rules: alphaFixRules,
});
```

> iQQ 遗产 `presetAlephAlpha()` (单方)不再出口——切换到 `defineAppConfig()` 如上所示。 如果您需要自定义的原始预设堆栈 `defineConfig`复数 `presetsAlephAlpha()` (见 _手工编译_) (中文(简体) ).

### 出口

-   `defineAppConfig(options?)` - 面向应用 `defineConfig` 包装、捆绑 `presetsAlephAlpha()` + 设计-系统内容路径.
-   `presetsAlephAlpha()` ——完整预设堆栈(Wind,Typography,web字体,动画,符号,主题,遗产相配).
-   `tokenPreset` ——只有设计-系统符号预设(CSS变量,主题映射).
-   `commonPresets` ——"风"+"打字"+"网络字体"+"动画",无符号.
-   `createPresets()` ——令牌预设 + 暗相模式主题预设 + 遗留相配预设.
-   `getDesignSystemContentPathConfig(framework)` ——用于扫描的内容管道配置 `@aleph-alpha/ds-components-vue` 或者说 `-svelte`。 。 。 .
-   `Theme` ——TypeScript主题类型由设计符所衍生出.
-   `AppConfigOptions` - 脚本类型 `defineAppConfig`。 。 。 .
-   `presetWebFontsAlephAlpha` ——内置 `@font-face` (c) 蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特、蒙特塞拉特的《规则》.

## 常见问题

### @aleph-alpha/config-unocss 是什么？

Aleph Alpha 前端的共享 UnoCSS预设\. 再导出设计-系统符号预设,网页字体预设,以及帮助者\.

### 如何安装 @aleph-alpha/config-unocss？

在项目目录运行 npm install @aleph-alpha/config-unocss，或使用 pnpm add / yarn add / bun add。

### @aleph-alpha/config-unocss 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @aleph-alpha/config-unocss 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @aleph-alpha/config-unocss 可以商用吗？

@aleph-alpha/config-unocss 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @aleph-alpha/config-unocss 的下载量有多少？

根据 npm 官方下载统计，@aleph-alpha/config-unocss 在 2026/10/06 – 2026/11/04 这 30 天内被下载 14,291 次，日均约 476 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @aleph-alpha/config-unocss 还在维护吗？

最新版本 0\.2\.1 发布于 2026/08/10（2 个月前）；至今共发布 2 个版本，其中过去 12 个月发布了 2 个；首次发布于 2026/06/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。