将 CSS 个模块与 Modernizr（class 个名称）一起使用

Question

Modernizr 将 classes 添加到文档的 <html> 标签中，例如<html class="no-touchevents">.

在我的代码中，我曾经写过这样的东西。

.style { background: green; }
.no-touchevents .style { background: red; }

因此，如果支持触摸，该元素将为绿色（正常），否则为红色（错误）。现在有了 CSS 模块，我的 .style class 被定义在一个文件中并被转换成这样的东西。

.xR23A { background: green; }
.hjTT7 .xR23A { background: red; }

如果我将 class 包裹在 :global 子句中，如果我理解正确的话，它应该保持不变。但是，这将适用于每个嵌套 class，因此我将保留它。

.xR23A { background: green; }
.no-touchevents .style { background: red; }

我该如何解决这个问题才能得到想要的解决方案？这就是我所追求的。

.xR23A { background: green; }
.no-touchevents .xR23A { background: red; }

Answer 1

您应该能够使用 global 的 paren 版本来仅容纳 modernizr 部分。

即

.style { background: green; }
:global(.no-touchevents) .style { background: red; }

Using CSS Modules with Modernizr (class names)