Creating a responsive grid system in my nextjs web app using scss module has been challenging.
/* 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%;
}
}
An issue cropped up stating that the use of [class*="col-"] is not allowed:
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 | }
How do we go about resolving this issue?