从 CSS 模块中引用全局类名答案

【问题标题】：Reference global class names from within a css module从 CSS 模块中引用全局类名
【发布时间】：2018-09-14 02:33:28
【问题描述】：

想象一个更传统的 Web 应用程序，它正在一个页面中缓慢地引入一个 React 组件，它足够复杂以至于需要它。

我们正在使用 Webpack 开发这个新 UI，并且我们正在使用 css 模块来满足新 UI 所需的所有新 css。但是我们仍然需要重用一些全局的 css，这些 css 通过链接在 html 中的传统 css 样式表在应用程序中提供。

因此，我们需要在我们的 css 模块中偶尔编写引用全局命名空间中的 css 类的规则，而不是在本地范围内的类，因此在应用程序运行时转换为更像 gem 的长 css 类名运行：

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

在上面的示例中，container 是一个 css 类，css 模块将使用该模块将其上下文化到特定组件。

但是pull-right是一个存在于页面中可用的css文件中的类，但不被css模块或Webpack处理。因此，我们需要一种方法（可能是一种语法）来告诉 css 模块“嘿，将pull-right 保留在您的输出中。不要弄乱它或尝试将其排除在外”。

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

【问题讨论】：

标签： css bem css-modules

【解决方案1】：

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

  .container {
    // rules for container
  }

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

更详细的 explanation 在 css-modules 文档中。

【讨论】：