:local(.class) { } 在 CSS 模块中如何工作？

Question

我已经开始使用 CSS 模块，但是我找不到任何具体如何工作的示例：

:local(.class){
    /* some property */
}

默认情况下所有类都是本地类，那么

:local

或

:global

是什么意思？

Answer 1

没错，默认情况下所有类都是本地的。但是，如果您将一个块切换为

global

并且您需要在内部使用本地选择器，则需要在其中应用

local

。

:global {
   .a {
    ...
  }
  :local(.b) {
    ...
  }
}

编译为

.a {
  ...
}
.b___1bJNe {
  ...
}

Answer 2

CSS 模块更像是一个规范，而不是完整的技术，并且有多种实现，例如webpack css-loader，Lightning CSS。

如果你使用 React/Next.js，你可能会使用 webpack。

:global()

/

:global

和

:local()

/

:local

修饰符的精确行为在 css-loader 文档中通过示例进行了描述。

另请注意，

:global()

/

:global

的严格性取决于传递给加载器配置的

mode

选项：

使用纯值要求选择器必须至少包含一个本地类或id。

滥用

mode

选项可能会导致类似这样的令人困惑的错误：

语法错误：选择器“:global”不是纯选择器（纯选择器必须包含至少一个本地类或 id）