从 css 模块中引用全局 class 名称

Question

想象一个更传统的 Web 应用程序，它在一个页面中慢慢引入 React 组件，该页面复杂到需要它。

我们正在使用 Webpack 开发这个新的 UI，并且我们正在为新 UI 需要的所有新 css 使用 css 模块。但是我们仍然需要重用一些全局的 css，它们是通过 html.

中链接的传统 css 样式表在应用程序中提供的

因此我们需要在我们的 css 模块中偶尔编写引用全局命名空间中的 css class 的规则，而不是局部范围内的 class因此，当应用程序为运行:

时，它会转换为更 gem 的长 css class 名称

.container {
  // rules for container
}
.container.pull-right {
  // rules for when the container element also has the pull-right class
}

在上面的示例中，container 意味着 css class，css 模块将上下文化到使用此模块的特定组件。

但是 pull-right 是一个 class，它存在于页面可用的 css 文件中，但未被 css 模块或 Webpack 处理。因此我们需要一种方法（可能是一种语法）来告诉 css 模块 "hey, leave pull-right as is in your output. Do not mess with it or try to BEM the s**t out of it".

我想像这样的东西应该存在，但到目前为止我还没有通过谷歌搜索找到它。

Answer 1

要在 :local 作用域 css 模块中引用全局声明的 class 名称，您应该使用 :global 开关：

  .container {
    // rules for container
  }

  .container:global(.pull-right) {
    // rules for when the container element also has the pull-right class
  }

explanation 在 css 模块文档中更详细。

从 css 模块中引用全局 class 名称

Reference global class names from within a css module

css

bem

css-modules