Reactjs 选择器"；：“全球级”；非纯（纯选择器必须至少包含一个本地类或id）

我在next.js中将css模块与Sass一起使用，我遇到了这个错误

:global {
    .slick-track {
        display: flex; // Syntax error: Selector ":global .slick-track" is not pure (pure selectors must contain at least one local class or id)
    }
}

这与官方的css模块文档相同，但是使用了Sass而不是Less，但是在Sass语法中，这应该可以工作

我看到了这个问题，但它使用了一个标记，而我使用的是一个类，所以它应该是纯的

当我将

（）

添加到：global时，不会弹出错误，但该样式未应用（在浏览器控制台中找不到该样式）

对于这个scss文件，它没有任何依赖关系（

@import@use

等），但我认为情况并非如此

---

我尝试根据添加一个自定义的

postss.config.js

，但都不起作用。

您需要在CSS模块中的本地选择器中使用全局选择器

例如，如果您有HTML：

<div className={classes.someCSSMoludesClass}>
  <div className="some-global-class">
    content
  </div>
</div>

别忘了在内部使用选择器：全局

我也有同样的问题，但在swiper slider中，并像这样解决了它。

---

也许你必须在上面的组件中编写这个类，我正在使用带有默认postss配置的nextjs。对我来说，这就是工作原理

.someCSSModulesClass :global .any-global-class {
  background-color: blue;
}

---

引用：

是否尝试将类名作为参数传入<代码>:global（.slick track）{display:flex；}@Jadam是的，它可以工作，但在这种情况下，来自Sass的分层类没有任何意义。您必须为每个项目编写相同的

：global（.class）

。出于好奇，这是否在任何地方都有文档记录？在这上面找不到任何东西。是的，这一个有效。但是css模块似乎是全局范围的

.someCSSModulesClass {
  :global(.some-global-class) {
    %your properties%
  }
}

.someCSSModulesClass :global .any-global-class {
  background-color: blue;
}