Next.js CSS Modules非纯选择器报错：如何保留样式在模块文件？

报错原因 #

Next.js的CSS Modules默认启用纯选择器校验，要求所有选择器必须包含至少一个本地作用域的类或ID。你使用的[class$="-colorTextSecondary"]是全局属性选择器，未关联本地模块类，因此触发报错。

解决方案 #

方案1：用:global()包裹全局选择器 #

将全局属性选择器用:global()包裹并嵌套在本地类内部，既保留在模块文件中，又能限定样式作用范围：

.summaryTypography{
    margin: 10px 20px 0 20px;
    text-align:right !important;
    
    :global([class$="-colorTextSecondary"]){
        text-align:justify;
    }
}

:global()会告诉Next.js不对该选择器做模块化处理，同时样式仅作用于.summaryTypography的子元素，不会污染全局样式。

方案2：为子元素分配本地类（推荐） #

若能控制目标子元素的渲染，直接为它分配本地模块类，更符合CSS Modules的设计规范：

1. 在组件中给子元素添加本地类：

// 以Material UI的Typography组件为例
<Typography className={styles.secondaryText} />

2. 在post.module.css中定义对应样式：

.summaryTypography{
    margin: 10px 20px 0 20px;
    text-align:right !important;
}

.secondaryText {
    text-align: justify;
}

这种方式完全避免全局选择器，样式隔离更可靠。

方案3：关闭纯选择器校验（不推荐） #

修改Next.js配置关闭校验，但会破坏CSS Modules的作用域隔离，容易引发样式冲突：
在next.config.js中添加如下配置：

module.exports = {
  webpack: (config) => {
    config.module.rules.forEach(rule => {
      if (rule.oneOf) {
        rule.oneOf.forEach(oneOfRule => {
          if (oneOfRule.test?.toString().includes('css')) {
            oneOfRule.use.forEach(use => {
              if (use.loader?.includes('css-loader')) {
                use.options.modules = {
                  ...use.options.modules,
                  pure: false,
                };
              }
            });
          }
        });
      }
    });
    return config;
  },
};

内容的提问来源于stack exchange，提问作者D. Rattansingh