选择器 ":global .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 文档示例相同，但使用 Sass 而不是 Less，但在 Sass 语法中，这应该可以工作。

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

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

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

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

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

Answer 1

这个答案适用于 Next.JS。如果您要更改正文或 html 等... css。您应该在 globals.css 上更改它，而不是 Home.modules.css 或其他地方。

Answer 2

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

例如，如果您有 HTML：

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

要重写全局类“some-global-class”，您需要在 CSS 模块中进行此操作：

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

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

我遇到了同样的问题，但是在滑动滑块中，并像这样解决了它。也许你必须在上面的组件中编写这个类