Question

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

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

因此，我们需要在css模块中偶尔编写引用全局命名空间中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。不要弄乱它，或尝试用BEM将其淘汰”。

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

Answer 1

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

  .container {
    // rules for container
  }

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

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

从CSS模块中引用全局类名称

1 个答案: