# @carbon/styles 中文文档

规范地址：https://npmcn.com/package/%40carbon/styles/

版本：1\.119\.0
npm 元数据更新时间：2026-11-04T14:12:01.354Z
中文译文更新时间：2026-11-09T02:39:32.120Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40carbon/styles
原文对照：https://npmcn.com/package/%40carbon/styles/?lang=original
项目主页：https://github.com/carbon-design-system/carbon#readme
源码仓库：https://github.com/carbon-design-system/carbon

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

- 包体积（解压后）：4.3 MB，385 个文件
- TypeScript 类型：未声明
- 运行依赖：17 个
- peer 依赖：sass ^1\.33\.0
- 首次发布：2021-07-30T16:39:03.100Z
- 最新版本发布：2026-11-04T14:12:01.020Z
- 近 30 天下载量：726885（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：302（近 12 个月 56 个）

## 中文简介

碳设计系统样式

## 安装

```sh
npm install @carbon/styles
```

也可以使用：`pnpm add @carbon/styles`、`yarn add @carbon/styles`、`bun add @carbon/styles`

## README

# @ 碳/ 样式

> 碳设计系统样式

## 开始

要安装 `@carbon/styles` 在您的工程中, 您需要运行以下 命令使用 [无](https://www.npmjs.com/)数字 :

```bash
npm install -S @carbon/styles
```

如果你喜欢 [雅伦](https://yarnpkg.com/en/),使用以下命令 相反:

```bash
yarn add @carbon/styles
```

此软件包需要 [达特萨斯](http://npmjs.com/package/sass) 以达到 编译. 用这个 [Sass 模块](https://css-tricks.com/introducing-sass-modules/) 组织工作 代码库和提供出口供使用.

如果你是Sass的新人 或者想知道如何为您的项目配置Sass, 我们建议检查下列资源和联系:

-   [萨斯基础](https://sass-lang.com/guide)
-   [使用 Sass 的 Web 包装](https://webpack.js.org/loaders/sass-loader/)
-   [下一位是萨斯](https://nextjs.org/docs/basic-features/built-in-css-support#sass-support)
-   [创建 Sass 的回放应用程序](https://create-react-app.dev/docs/adding-a-sass-stylesheet/)
-   [带萨斯的 Parcel](https://v2.parceljs.org/languages/sass/)
-   [与 Sass 同步](https://vitejs.dev/guide/features.html#css-pre-processors)
-   [带萨斯的雪袋](https://www.snowpack.dev/guides/sass/)

一旦你得到萨斯 并运行在您的项目, 确保配置萨斯 包含 `node_modules` 联合国 `includePaths` 选项。 有关更多信息, 检查 [配置](https://npmcn.com/package/%40carbon/styles/docs/sass.md#configuration) 在我们的萨斯 医生.

## 使用量

通过包含碳设计系统,可以带来所有样式 `@carbon/styles` 在你的萨斯文件。 例如:

```scss
@use '@carbon/styles';
```

如果您只想从Carbon中引入特定的组件,您可以 以类似方式导入它们:

```scss
@use '@carbon/styles/scss/reset';
@use '@carbon/styles/scss/components/accordion';
@use '@carbon/styles/scss/components/button';
@use '@carbon/styles/scss/components/checkbox';
```

也可以包括来自Carbon的各种助手,例如: CSS重设,网格,断点帮助器等等. 你可以包括这些类似 如何带入组件 :

```scss
// Bring in the CSS Reset
@use '@carbon/styles/scss/reset';

// Bring in the CSS Grid
@use '@carbon/styles/scss/grid';
```

要更多地了解各种帮助者 `@carbon/styles` 提供, 退出 用于我们 [Sass 文档](https://npmcn.com/package/%40carbon/styles/docs/sass.md#files)。 。 。 .

## 替换字体

碳是IBM Plex设计、测试和调制的。 我们不建议 替换碳字型。 如果您绝对需要使用不同的 类型面,你需要把它当作一个构建时间 Sass定制 应用程序拥有。 没有支持运行时类型面覆盖 预建/CDN碳样式.

> \[尖叫声\] **冒险使用**
> 
> 覆盖碳型面具有广泛的设计和无障碍性 影响。 碳类型样式的调取 与IBM Plex 的度量衡, 包括行高、字母间隔、重量、格子比例、结子等, 和退后的行为。 替换类型面可以改变布局,包装, 密度、可读性和相互作用状态。 它可以是一个重要的设计 并努力使另一打字机工作正确跨越 应用.

要使用有不同类型面的Carbon,需要三件事:

1.  关闭碳的棱镜 `@font-face` 生成
2.  改变根 `font-family` 定义
3.  自己供应 `@font-face` 规则

你可以通过配置 Sass 入口来完成前两个 应用程序编译。 此配置必须在其他配置之前发生 `@use` 联 合 国 碳sass模块.

```scss
@use 'sass:string';

@use '@carbon/styles' with (
  // Turn off Carbon's Plex `@font-face` generation
  $css--font-face: false,

  // Change the root `font-family` definition(s)
  $font-families:
    (
      'sans':
        string.unquote(
          "'Inter Local', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
        ),
      'mono':
        string.unquote(
          "'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace"
        ),
      'serif':
        string.unquote(
          "'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif"
        ),
      // Include any other Carbon font family keys your application compiles.
    )
);
```

`$font-families` 不与Carbon的默认合并。 如果您配置此选项 地图,包括您编译的样式需要的每个家族密钥,例如 `sans`, (中文(简体) ), `mono`, (中文(简体) ), `serif`,或者您所使用的任何额外的语言特有 Plex 堆栈 应用.

那就自己供应吧 `@font-face` 用于装入替换字体资产的规则.

```scss
@font-face {
  font-display: swap;
  font-family: 'Inter Local';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/inter-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Inter Local';
  font-style: normal;
  font-weight: 600;
  src: url('./fonts/inter-latin-600-normal.woff2') format('woff2');
}
```

只装入应用程序所需的加权、样式和 Unicode 范围, 但要确保它们覆盖字体重量 和样式 您的碳用量释放出。 若为 您使用第三方字体服务,审查其隐私和区域合规性 影响,包括字体请求是否以各种方式暴露用户数据 您无法接受申请.

## 他们

您可以通过下列操作更改 Carbon 的默认主题:

```scss
@use '@carbon/styles/scss/themes';
@use '@carbon/styles/scss/theme' with (
  $theme: themes.$g100
);
```

此示例使用来自 carbon 的内置主题 `scss/themes` 进入点。 您也可以使用自定义主题,或者将自己的自定义符号添加到 扩展主题.

```scss
// Configure with a custom theme
@use '@carbon/styles/scss/theme' with (
  $theme: (
    background: #e2e2e2,
    text-primary: #ffffff,
  )
);
```

```scss
// Extend the g100 theme with your own tokens
@use '@carbon/styles/scss/themes';
@use '@carbon/styles/scss/theme' with (
  $fallback: themes.$g100,
  $theme: (
    custom-token-01: #000000,
  )
);
```

### 设计符号

您可以通过 `@carbon/styles/scss/theme` 进入点。 此文件将允许您引用 使用 Sass 变量的符号以及获取任意符号的当前值 当前主题。 例如:

```scss
@use '@carbon/styles/scss/theme';

body {
  background: theme.$background;
}
```

需要您使用的所有代币列表,请查看 [主题文档](https://npmcn.com/package/%40carbon/themes/docs/sass.md#tokens)。 。 。 .

## API 文档

如果你要找的话 `@carbon/styles` API 文档, 请检查:

-   [萨斯](https://npmcn.com/package/%40carbon/styles/docs/sass.md)

## 捐款

我们总是寻找贡献者 帮助我们修复错误, 建立新的特性, 或者帮助我们改进项目文件。 如果你有兴趣,肯定 看看我们 [贡献指南](https://npmcn.com/.github/CONTRIBUTING.md)!

## 许可证

凭 [Apache 2.0 许可证](https://npmcn.com/LICENSE)。 。 。 .

## ![IBM Telemetry](https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg) IBM 遥测

本套件使用 IBM 遥测来收集去识别和匿名的度量衡 数据。 通过安装此包作为依赖, 您同意远程测量 藏书。 选择退出,看 [选择退出IBM遥测数据收集](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection)。 。 。 . 有关所收集数据的更多信息,请参见: [IBM 遥测文档](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics)。 。 。 .

## 常见问题

### @carbon/styles 是什么？

碳设计系统样式

### 如何安装 @carbon/styles？

在项目目录运行 npm install @carbon/styles，或使用 pnpm add / yarn add / bun add。

### @carbon/styles 支持 TypeScript 吗？

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

### @carbon/styles 可以商用吗？

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

### @carbon/styles 的下载量有多少？

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

### @carbon/styles 还在维护吗？

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