# @animus-ui/layergate 中文文档

规范地址：https://npmcn.com/package/%40animus-ui/layergate/

版本：0\.1\.87
npm 元数据更新时间：2026-10-24T04:18:36.366Z
中文译文更新时间：2026-11-06T06:23:07.033Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40animus-ui/layergate
原文对照：https://npmcn.com/package/%40animus-ui/layergate/?lang=original
项目主页：https://github.com/codecaaron/animus/tree/main/packages/layergate#readme
源码仓库：https://github.com/codecaaron/animus

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

- 包体积（解压后）：170 kB，46 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=22\.12\.0
- 运行依赖：1 个
- peer 依赖：vite \>=8 \<9，webpack \>=5 \<6
- 首次发布：2026-10-14T13:44:58.327Z
- 最新版本发布：2026-10-24T04:18:35.989Z
- 近 30 天下载量：4449（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：50（近 12 个月 50 个）

## 中文简介

将第三方样式表装入每个文件的级联层,其进口内容被内化,其URL继续工作

## 安装

```sh
npm install @animus-ui/layergate
```

也可以使用：`pnpm add @animus-ui/layergate`、`yarn add @animus-ui/layergate`、`bun add @animus-ui/layergate`

## README

# @animus-ui/ 层门

对于销售商样式表, 您必须导入: 取日期器、 网格 图书馆,一个软件包 `styles.css`将它装入级联 你下面的一层,所以它的正常规则 无法对抗你的设计系统, 不管他们的特异性或负载顺序.

任意外的样式表 `@layer` 打破每层规则,所以卖家CSS 按常例导入,可超过使用的设计系统或通用框架 层。 层门加载 CSS 本身, 内含其 `@import`s,并设置 每个文件在您下面一层的规则 :

```css
@layer vendor, app;
@layer vendor {
  /* react-grid-layout/css/styles.css, as written */
}
```

你的CSS已经超出范围了 App 样式表和 CSS 模块与您一样 配置它们: 层口层只包含您声明的供应商文件 (单位:千美元)`sheets`)或选择加入(`dependencies`),包括您的 CSS 导入地点 一个.

## 维特

```ts
import { layergate } from '@animus-ui/layergate/vite';
// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    layergate({
      layer: 'vendor',
      order: ['vendor', 'base', 'components', 'utilities'],
      sheets: ['react-grid-layout/css/styles.css', './styles/legacy.css'],
      dependencies: ['react-datepicker'],
      optOut: ['./styles/legacy/keep-unlayered.css'],
    }),
  ],
});
```

```ts
// your entry module, once, before other CSS
import 'virtual:layergate';
```

| 选项 | 含义 |
| --- | --- |
| `layer` | 层自有样式表进入 。 默认 `vendor`。 。 。 . |
| `order` | 每个自有样式表都首先声明完整层的顺序 。 它必须包括 `layer`默认 `[layer]`。 。 。 . |
| `sheets` | 样式表 `virtual:layergate` 在此顺序下,提供与Vite根相对的包指定符或路径,不论是否有其它任何导入它们. |
| `dependencies` | 也拥有 `.css` a JS 模块从您的应用程序以外的软件包中导入: `true` 每个软件包或软件包名称。 默认:无. |
| `optOut` | 属于自有样式表内的文件,其规则不包含在层外。 精确的规格或路径,从不模糊. |

JS模块输入的自有样式表,通过任何拼写,都得到同样的效果 单份,申报的床单总是在申报的 命令,以应用程序导入时所用的样式表为准。 维特自己的CSS系统 然后每一次处理一次: 提取。 一个窝 `@import` 包的解析,如 CSS 导入时, 通过其 `style` 输入。 字体和图像不断解析,因为 层门重写相对 `url()` 从已交付的文件解析. 编辑到自有文件、嵌入式导入和下面的文件 `node_modules` 包括,热更新到位.

## 网络软件包

```js
// webpack.config.js
const { LayergatePlugin } = require('@animus-ui/layergate/webpack');

module.exports = {
  plugins: [
    new LayergatePlugin({
      layer: 'vendor',
      order: ['vendor', 'base', 'components', 'utilities'],
      sheets: ['react-grid-layout/css/styles.css'],
      dependencies: ['react-datepicker'],
      declaredBy: require.resolve('./src/styles/app.css'),
    }),
  ],
};
```

插件没有添加规则 。 它会加入你所有的装货链 css-loader明确为全局(`modules: false`,作为Next的全球链条 在PostCSS运行之前, 提高Cs -loader的 `importLoaders` 每个样式表都会通过它,导入 包括这些 自有样式表到达完成 `@import`编号 由于 cs-loader 解决了它们和内嵌, 所以 cs-loader 从未看到 (单位:千美元) `layer()` 导入。 PostCSS, Sass和Cs-loader 继续像以前一样运行.

其他链条都未受影响。 一个Css -loader可以处理文件 作为CSS模块`modules` 未设置,或 `auto`)在一行中报告 (单位:千美元)`layergate.coverage`); 链条只构建 CSS 模块,例如 下个是,静静地独活.

### CSS 模块与层门

层门不能决定哪个样式表是 CSS 模块。 如果有一个规则 处理两个, 拆分它: 全球 CSS 在一个规则中, 其 cs- loader 有 `modules: false`,该图层门将加入, CSS 模块在规则 他们自己的,它独自离开.

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /\.module\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { modules: false } },
        ],
      },
      {
        test: /\.module\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { modules: true } },
        ],
      },
    ],
  },
};
```

下一个已经以这种方式构建 CSS .

什么层门返回从不被 Web 包缓存, 所以温和地开始 持久缓存再次完成自有样式表: 每200个约118 ms 合成测量中的销售单。 安全地抢走他们 \* 来源(文件和计划)与缓存一起保存,a 以后可能会有变动。 所有权、选择不适用和 申报的床单是按真实情况处理的; `url()`s 重新基于网络包 读取每个文件,所以 `resolve.symlinks: false` 把它们解决为 cs- loader 已经 这个 `declaredBy` 样式表从不分层,即使自有 样式表导入它.

网页包没有 `virtual:layergate`。通过 `declaredBy`,一个路径 您的样式表: 所申报的工作表放在其头上, a 模块本身导入一个,然后不装入任何内容。 没有它,每个都导入 自己申报的工作表;它属于进口的任何地方.

-   遥控器 `@import` 在自有样式表中是一个错误 (单位:千美元)`layergate.remote`: 网络包装不能装入层内,而且 无层拷贝会逃脱它。 在本地销售工作表, 或者选择文件 如果未分层是可以接受的,则退出.
-   一个使用闪电CSS而不是cs-loader的链条没有覆盖, 报告`layergate.coverage`) (中文(简体) ).
-   在监视模式下,将自有样式表读取的文件编辑到任何文件 `node_modules` 包括,重建它。 插件会生成 RegExp 或 函数 `watchOptions.ignored` 监视这些文件; 拥有它的主机 监视选项通过 `watchIgnored: false` 问 `plugin.watches(path)`。 。 。 .
-   Turbopack 在样式表上不运行加载器会导入样式表, 所以 层门不能在那里工作 .

与下个和Animus一起使用 `quarantine` 选项 `@animus-ui/next-plugin`,它为 Next 的客户端编译器设置了此功能.

## 它对样式表的作用

-   **每个文件都是自己决定的.** 一个文件自己的规则进入 层。 选择退出文件的规则 留在它之外,根据 联合国 `@import` 并保存它导入的文件 他们自己的决定.
-   **进口品保持其条件.** `@import "x.css" layer(a) supports(…) screen` 变成 `@media screen { @supports (…) { @layer a { … } } }` 在地层内部,所以它的规矩是 `vendor.a`匿名 `layer` import 获得它自己的一个私有层,而不是共享层.
-   **文字为正文.** 选择者,声明, `!important`, (中文(简体) ), keyframes 和文件本身的分层到达浏览器。 仅a 相对 `url()` 在已发送文件目录更改以外的文件中.
-   **远程进口保持远程.** 在维特下,一个 `http(s):` 导入为 竖起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起起 未检查。 在webpack下,这是一个错误(见上文).

## 何等地层不变

一层只限制正常声明。 记录和报告为: 警告,永远不要剥去:

-   `!important` 声明,将你的正常声明从任何 层`layergate.important`(三);
-   动画和密钥框架,其价值高于正常声明 当他们运行时(`layergate.animation`) (中文(简体) ).

字体、密钥框和财产名称是全球性的,无论图层如何.

## 还没有

-   CSS模块,Sass,Less和Stylus留给了Vite. 在网包里,萨斯 输出像任何 CSS 一样完成, CSS 模块被留下.
-   拥有的文件可以多次到达. 样式表 Vite 负载 例如应用表 `@import` 到达自有文件, 是 由分层门完成:它自己的规则保持不变,拥有 文件是内嵌的分层,所以没有未分层的复制逃出。 但每个都完成了 样式表是自立的,所以从其中的2个得到相同的自有文件 每一份都分层交付 每个文件一份 整个文件都需要一个全文件范围的登记处,一个可能的 之后的递增.
-   App CSS 除非您在列表中列出 `sheets`. 装载的CSS 在此之前 `virtual:layergate`,或者另一个工具的层顺序语句 先来, 还可以把你们的分层放在后面 `vendor`。 。 。 .
-   A 类 `.css` 带有查询的请求( e)`?inline`, (中文(简体) ), `?url`, (中文(简体) ), `?raw`)是留给Vite的.
-   样式表 `@namespace` 是个错误( r)`layergate.namespace`it: 适用于整个样式表,而输入另一个样式表的文件不是.
-   一个主机的 PostCSS 运行一次,在每个完成的样式表上,而不是每个文件上.
-   Turbopack:不支持(见上文webpack).

## 从主机样式表交付

带有自己的样式表模块的工具可以在 它的头,而不是穿过 `virtual:layergate`: 通过 `declaredBy` (单位:千美元) 模块的规格,一个自有的样式表 一个JS模块从此导入 首先加载)和预置 `await plugin.stylesheetHead.call(this, id)` 改为 该模块的CSS在其 `load` 钩. 头部使用根相通的 URL,所以 从虚拟模块中解析资产; Vite 根外的文件是 通过 `/@fs/`: 正在开发中,一个已申报的工作表的目录是 添加到 `server.fs.allow` 当服务器启动时( 在您自己的列表中, 或 Vite 默认的工作空间根, 以及它在另一个中引用的资产 当找到目录时, 它被允许; 在建置中, 它被作为 资产。 Animus的 (Animus) (英语) `quarantine` 选项这样做.

## 核心 API

`compileUnit(roots, { layer, order, resolve, read, quarantined, owns, url, base, cache })` 将样式表图表按顺序汇编成一个已完成的样式表 主机的解析器和文件读取器,并返回 CSS, 源地图, 文件 阅读,无论任何东西是分层的, 和诊断. `owns` 说 文件会启动一个自有的图表( 默认: 所有) ,并且 `url` 映射引用文件 至其 URL 文本(默认:相对于第一个根). `base` 是生成的目录层名相对(工程) root),所以它们在每个机器上都是一样的. `cache` 保持解析文件 在编译之间; 当一个文件的条目发生变化时将其放下。 虚拟和网络包装 适配器建于上.

## 常见问题

### @animus-ui/layergate 是什么？

将第三方样式表装入每个文件的级联层,其进口内容被内化,其URL继续工作

### 如何安装 @animus-ui/layergate？

在项目目录运行 npm install @animus-ui/layergate，或使用 pnpm add / yarn add / bun add。

### @animus-ui/layergate 支持 TypeScript 吗？

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

### @animus-ui/layergate 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @animus-ui/layergate 需要什么版本的 Node\.js？

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

### @animus-ui/layergate 可以商用吗？

@animus-ui/layergate 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @animus-ui/layergate 的下载量有多少？

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

### @animus-ui/layergate 还在维护吗？

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