跳到主要内容
版本：3.8.1

📦 plugin-css-cascade-layers

实验性

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

一个用于将 Docusaurus 站点的 CSS 模块包装到CSS 层叠层中的插件。这个现代 CSS 特性得到了所有浏览器的广泛支持。它允许将 CSS 规则按特定性分层分组，并让您更好地控制 CSS 层叠。

使用此插件可以

  • 将顶级 @layer myLayer { ... } 块规则应用于任何 CSS 模块，包括未分层的第三方 CSS。
  • 定义明确的层顺序
注意

要正确使用此插件，建议您对CSS 层叠层、CSS 层叠以及特殊性有扎实的理解。

安装​

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

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

配置​

接受的字段

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

类型​

Layers​

type Layers = Record<
  string, // layer name
  (filePath: string) => boolean // layer matcher
>;

layers 对象由以下内容定义：

  • key：层的名称
  • value：一个函数，用于定义给定的 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'),
  },
};