Next.js的scss module中如何使用[class*="col-"]属性选择器？

报错原因 #

CSS Module 规则要求所有选择器必须至少包含一个本地类或ID，你直接编写的[class*="col-"]是全局属性选择器，没有关联任何本地作用域的类，因此触发了非纯选择器的语法错误。

解决方案 #

方案1：挂载到本地父类 #

给网格容器新增一个本地类，把属性选择器作为该父类的子选择器编写，即可满足本地作用域要求：

/* 本地父类，仅作用于当前模块 */
.grid-wrap {
  .col-1 { width: 8.33%; }
  .col-2 { width: 16.66%; }
  .col-3 { width: 25%; }

  @media only screen and (max-width: 768px) {
    /* 选择器包含本地父类，符合CSS Module规则 */
    [class*="col-"] {
      width: 100%;
    }
  }
}

使用时给网格外层容器绑定grid-wrap类即可。

方案2：声明为全局选择器 #

如果你确定该属性选择器需要全局生效，可以用:global()包裹，跳过本地作用域校验：

.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }

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

注意：该写法的选择器会全局生效，可能和其他页面的同名样式冲突，需谨慎使用。

方案3：SCSS循环生成样式 #

完全避免使用属性选择器，通过SCSS循环自动生成所有col类的响应式规则：

// 生成12列桌面端网格样式
@for $i from 1 through 12 {
  .col-#{$i} {
    width: percentage($i / 12);
  }
}

// 生成移动端100%宽度样式
@media only screen and (max-width: 768px) {
  @for $i from 1 through 12 {
    .col-#{$i} {
      width: 100%;
    }
  }
}

该写法完全符合CSS Module规则，同时不需要手动逐个编写列类样式，可扩展性更强。

内容的提问来源于stack exchange，提问作者SeyyedKhandon