如何在 nextjs 的 scss 模块中使用 [class*= "col-" ]？

Question

我尝试在我的nextjs网络应用程序中使用scss module，

/* For desktop: */
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}

但是我遇到了一个问题，告诉我你不能使用[class*="col-"]:

error - ./pages/examples/test.module.scss:56:2
Syntax error: Selector "[class*=col-]" is not pure (pure selectors must contain at least one local class or id)
54 | @media only screen and (max-width: 768px) {
55 |   /* For mobile phones: */
> 56 |   [class*="col-"] {
|  ^
57 |     width: 100%;
58 |   }

我们如何解决这个问题?

Answer 1

试试这个:

@media screen and (max-width: 768px) {
.row :global [class*="col-"] {
width: 100%;
}
}