跳到主要内容

📦 plugin-css-cascade-layers

实验性

此插件主要设计为通过 Docusaurus future.v4.useCssCascadeLayers 标志在经典预设中内部使用，尽管也可以作为独立插件使用。如果您有使用场景，请在此告诉我们，帮助我们为 Docusaurus 的未来设计一个合理的 API。

一个用于将 Docusaurus 站点的 CSS 模块包装在 CSS 级联层中的插件。这个现代 CSS 功能已被所有浏览器广泛支持。它允许按特异性对 CSS 规则进行分组，并让您更好地控制 CSS 级联。

使用此插件可以：

  • 在任何 CSS 模块（包括未分层的第三方 CSS）周围应用顶层 @layer myLayer { ... } 块规则
  • 定义显式的层级顺序
警告

要正确使用此插件，建议对 CSS 级联层、CSS 级联和特异性有扎实的理解。

安装​

npm install --save @docusaurus/plugin-css-cascade-layers
提示

如果您使用预设 @docusaurus/preset-classic，此插件将通过 siteConfig.future.v4.useCssCascadeLayers 标志自动配置。

配置​

接受的字段：

名称类型默认值描述
layersLayers内置层表示您想要使用的所有 CSS 级联层的对象，以及是否应将该层应用于给定的文件路径。请参见下面的示例和类型。

类型​

Layers​

type Layers = Record<
  string, // 层名称
  (filePath: string) => boolean // 层匹配器
>;

layers 对象由以下定义：

  • 键：层的名称
  • 值：定义给定的 CSS 模块文件是否应在该层中的函数
顺序很重要

对象顺序很重要：

  • 键的顺序定义了显式的 CSS 层顺序
  • 当多个层匹配文件路径时，只有第一个层将被应用

示例配置​

您可以通过插件选项配置此插件。

const options = {
  layers: {
    'docusaurus.infima': (filePath) =>
      filePath.includes('/node_modules/infima/dist'),
    'docusaurus.theme-classic': (filePath) =>
      filePath.includes('/node_modules/@docusaurus/theme-classic/lib'),
  },
};