选择器“:global .class”不是纯选择器（纯选择器必须至少包含一个本地class或id）

Question

我在 next.js 中使用带有 Sass 的 css 模块，我得到了这个错误

: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-modules 文档 example 相同，但使用 Sass 而不是 Less 但在 Sass 语法中这应该有效。

我看到了问题，但它使用的是标签，而我使用的是 class，所以它应该是纯的。

当我将 () 添加到 :global 时，它不会弹出错误，但样式不适用（您无法在浏览器控制台中找到此样式）

:global() {
    .slick-track {
        display: flex; // No error, but style not working
    }
}

对于这个 scss 文件，它没有任何依赖性（@import @use 等），但我认为情况并非如此。

我尝试根据 this 添加自定义 postcss.config.js 但也不起作用。

Answer 1

您需要在 CSS-modules 中的本地选择器中使用全局选择器。

例如，如果您有 HTML:

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

为了重写 global class "some-global-class" 你需要在你的 CSS-module:

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

不要忘记在 :global 中使用选择器。

我有同样的问题，但是在swiper slider中，并这样解决了。也许你必须在上面的组件中写这个 class

Answer 2

我正在使用带有默认 postcss 配置的 nextjs。对我来说，这就是工作原理。

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

参考：https://github.com/css-modules/css-modules#exceptions

Answer 3

此答案适用于 NEXT.JS。如果您要更改 body 或 html 等... css。您应该在 globals.css 而不是 Home.modules.css 或其他地方更改它。

选择器“:global .class”不是纯选择器（纯选择器必须至少包含一个本地class或id）

Selector ":global .class" is not pure (pure selectors must contain at least one local class or id)

sass

reactjs

css-modules

next.js