# @aurodesignsystem/webcorestylesheets 中文文档

规范地址：https://npmcn.com/package/%40aurodesignsystem/webcorestylesheets/

版本：12\.0\.1
npm 元数据更新时间：2026-08-20T18:16:42.193Z
中文译文更新时间：2026-11-07T05:22:06.536Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40aurodesignsystem/webcorestylesheets
原文对照：https://npmcn.com/package/%40aurodesignsystem/webcorestylesheets/?lang=original
项目主页：https://github.com/AlaskaAirlines/WebCoreStyleSheets#readme
源码仓库：https://github.com/AlaskaAirlines/WebCoreStyleSheets

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

- 包体积（解压后）：2.9 MB，157 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- Node.js 要求：\>=20
- 运行依赖：1 个
- peer 依赖：sass ^1\.42\.1
- 首次发布：2022-06-08T23:37:10.925Z
- 最新版本发布：2026-08-20T18:16:41.623Z
- 近 30 天下载量：61073（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：64（近 12 个月 7 个）

## 中文简介

奥罗核心基金会 Sass UI Kit

## 安装

```sh
npm install @aurodesignsystem/webcorestylesheets
```

也可以使用：`pnpm add @aurodesignsystem/webcorestylesheets`、`yarn add @aurodesignsystem/webcorestylesheets`、`bun add @aurodesignsystem/webcorestylesheets`

## README

# WC 样式工作表

WC Style Sheets(WCSS)是一款反应灵敏,移动第一的样式和工具集,旨在让开发者使用Auro Design Language快速而简单地创建网络体验.

## 包括什么

这个寄存器是一个核心关卡样式,功能,和混音的库,可用于一致的前端UI开发. 这将包括对CSS选择器,混音器和任何其他辅助功能或工具的完整描述.

## 文档

请看 [文档网站](https://alaskaairlines.github.io/WebCoreStyleSheets/) 用于所有与 WC 样式表有关的信息.

## 升级到 v12( Sass 模块)

世界社保协会 `v12.0.0` 从腐朽的萨斯人迁徙 `@import` 系统到 [Sass 模块系统](https://sass-lang.com/documentation/at-rules/use/) (单位:千美元)`@use` 编号 : `@forward`) (中文(简体) ). 这对消费者来说是一个突破性的变化。 见 [移徙指南](https://npmcn.com/package/%40aurodesignsystem/webcorestylesheets/MIGRATION.md) 所需员额 `@use` 语法和新 `@use ... with (...)` 范围、前缀和 `!important` 配置 .

## 设计标志和遗留部分支助

升级为世界基督教团结会 `v5.x` 需求 `@aurodesignsystem/design-tokens@4.x`。 。 。 .

当您的项目升级时,可能需要保留 `@aurodesignsystem/design-tokens@v3.15.5` 用于支持 Auro 自定义元素的 [新设计标志命名公约](https://github.com/AlaskaAirlines/AuroDesignTokens/issues/118)。 。 。 .

请参看奥罗设计标志 [从3.x迁移到4.x](https://github.com/AlaskaAirlines/aurodesignTokens/#migration-from-3x-to-4x) 用于补充信息.

## 安装

[![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/webcorestylesheets/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/webcorestylesheets/actions/workflows/testPublish.yml) [![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/webcorestylesheets.svg?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/webcorestyleSheets) [![License](https://img.shields.io/npm/l/@aurodesignsystem/webcorestylesheets.svg?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0) [![issues](https://img.shields.io/github/issues-raw/AlaskaAirlines/WebCoreStyleSheets?style=for-the-badge)](https://github.com/AlaskaAirlines/WebCoreStyleSheets/issues) ![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)

### 预处理的捆绑资源

在有限的尺度上,一些文件被预处理到CSS,以便通过CDN交付,并用于需要这种资源的环境.

**API 注释**: 第一个支持版本 `v2.9.0`

**注意点!** 使用 `@latest` **冒险**。这不会限制更新并允许立即访问 **大师** 将包含 **破坏变化**你被警告过!

| 资源 | CDN URL (简体中文) |
| --- | --- |
| 基本内容  
字体.scs | [https://cdn.jsdelivr.net/npm/@aurodesignsystem/ (中文(简体) )  
网芯样式表@latest/dist/bandled/ 必需.css](https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials.css) |
| 焦点可见. scs  
基本内容  
字体.scs | [https://cdn.jsdelivr.net/npm/@aurodesignsystem/ (中文(简体) )  
网芯样式表@latest/dist/bandled/ 必需+fv.css](https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials+fv.css) |

### 使用 npm 资源中的 Sass 文件

```bash
$ npm i @aurodesignsystem/webcorestylesheets
```

没有核心文件可以导入,相反,WCSS是一个à la carte 解决方案,允许用户加载自己想要的和何时想要的. WCSS 船舶作为 Sass 模块——装入文件 `@use` 如下所示:

```scss
@use "./../node_modules/@aurodesignsystem/webcorestylesheets/src/ ... " as *;
```

### 多主题支持

Web CoreStyle Sheets为阿拉斯加航空集团的各种品牌提供多主题支持. 每个主题包括自己的字体定义和样式.

#### 可用主题

关于现有主题和如何使用这些主题的更多信息,请参见: [奥罗设计 脚本文档](https://auro.alaskaair.com/getting-started/developers/design-tokens)。 。 。 .

#### 使用主题

要在工程中使用特定的主题,请加载相应的主题文件.

例如:

```scss
/* Alaska Airlines theme (Auro default) */
@use "./../node_modules/@aurodesignsystem/webcorestylesheets/src/essentials-as" as *;
```

其他主题载于本文件附件 `src` 目录.

#### 捆绑主题资源

每个主题还有一个捆绑的版本 `dist/bundles` 包含快速执行基本内容的目录:

例如:

```css
/* Alaska Airlines theme (Auro default) */
dist/bundles/essentials-as.css
```

## 发展

发展与WCSS同时运行 `npm run watch` 财务报告和审定财务报表 `npm run serve` 在单独的终端.

这个 `watch` 命令将运行一个 Sass linter,处理一个从 Sass 到 CSS 的测试文件,并运行一个 Post CSS linter 。 这将确保所有新增的Sass在回放中的质量.

如果需要额外的选择者或设想,请更新 `./scripts/testBuild.scss` 用于测试代码的文件.

运行 `serve` 命令将打开 Sassdoc 视图。 请检查access-date=中的日期值 (帮助) Sassdoc制作所有文档时, 请审查所有更改 .

### 已执行的构建产出

两套文件是 **产生和承诺** 到还原点:

-   **`dist/`** ——下游用户所消耗的被预处理的捆绑.
-   **`src/type/mixins/_theme-codes.scss`** - 生成的 Sass 部分(`@use "theme-codes"`) 作者: `scripts/theme-codes.build.mjs` 从AuroDesignTokens主题定义。 因为它是承诺,一个直接 `sass` 引用编译时没有预建步骤 .

两者都是由 `npm run build` (运行中) `build:theme-codes` (第一编) 执行 **没有** 手剪他们.. `_theme-codes.scss` 由设计套件再生成,并且 `dist/` 从 `src/`. CI 强制要求承诺的输出匹配一个新的构建,所以 **当你改变时 `src/` 或起起伏处 `@aurodesignsystem/design-tokens`运行 `npm run build` 并承担由此产生的修改** 否则公关会失败.

仅重生部分主题代码:

```shell
$ npm run build:theme-codes
```

## 常见问题

### @aurodesignsystem/webcorestylesheets 是什么？

奥罗核心基金会 Sass UI Kit

### 如何安装 @aurodesignsystem/webcorestylesheets？

在项目目录运行 npm install @aurodesignsystem/webcorestylesheets，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：sass（^1\.42\.1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @aurodesignsystem/webcorestylesheets 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/aurodesignsystem\_\_webcorestylesheets 是否存在。

### @aurodesignsystem/webcorestylesheets 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @aurodesignsystem/webcorestylesheets 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @aurodesignsystem/webcorestylesheets 可以商用吗？

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

### @aurodesignsystem/webcorestylesheets 的下载量有多少？

根据 npm 官方下载统计，@aurodesignsystem/webcorestylesheets 在 2026/10/07 – 2026/11/05 这 30 天内被下载 61,073 次，日均约 2,036 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @aurodesignsystem/webcorestylesheets 还在维护吗？

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