选择器 ":global .class" 不是纯的纯选择器必须至少包含一个本地类或 id

编程问答 2022-05-27

问题描述

我在 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 doc example 相同，但使用 Sass 而不是 Less，但在 Sass 语法中这应该可以工作。

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

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

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

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

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

解决方法

您需要在 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 中使用选择器。

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

,

我正在使用具有默认 postcss 配置的 nextjs。对我来说，这就是工作方式。

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

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

css-modulesreactjsreactjsreactjsreactjssasssass