选择器“:global .class"不纯(纯选择器必须至少包含一个本地类或 id) [英] Selector ":global .class" is not pure (pure selectors must contain at least one local class or id)

问题描述

我在 next.js 中使用带有 Sass 的 css 模块，但出现此错误

:global {.slick-track {显示:弹性；//语法错误:选择器:global .slick-track"不纯(纯选择器必须至少包含一个本地类或 id)}}

这与官方的 css-modules 文档相同 example 但使用 Sass 而不是 Less 但在 Sass 语法中这应该可以工作.

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

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

:global() {.slick-track {显示:弹性；//没有错误，但样式不起作用}}

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

我尝试根据 这个 但也不起作用.

解决方案

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

例如，如果您有 HTML:

<div className="some-global-class">内容

用于重写全局类some-global-class"你需要在你的 CSS 模块中做到这一点:

.someCSSModulesClass {:global(.some-global-class) {%你的财产%}}

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

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

I am using css modules with Sass in next.js and I got this error

: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)
    }
}

This is as identical as the official css-modules doc example but with Sass instead of Less but in Sass syntax this should be working.

I saw this question but it was using a tag whereas I am using a class so it should be pure.

When I add () to :global it won't pop error but the style is not applying (You cannot find this style in browser console)

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

For this scss file it does not have any dependency (@import @use etc.) but I think it is not the case.

I try adding a custom postcss.config.js according to this but not working either.

解决方案

You need to use global selector inside your local selector in CSS-modules.

For example, if you have HTML:

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

for rewriting global class "some-global-class" you need to make this inside your CSS-module:

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

Don't forget to use selector inside :global.

I had the same problem, but in swiper slider, and resolved it like this. Maybe you have to write this class in the component that is above

这篇关于选择器“:global .class"不纯(纯选择器必须至少包含一个本地类或 id)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！