Nuxt 2中CSS Modules与extractCSS类重复问题求助

当多个组件引入同一个CSS模块（如示例中的uncommon.css）时，Nuxt 2默认会为每个组件单独处理该模块，导致生成重复的哈希类名和重复打包的CSS代码。以下是几种可行的解决方法：

方法1：自定义CSS Modules类名生成规则，确保共享模块类名一致 #

通过修改Nuxt的webpack配置，针对共享CSS文件生成固定的类名或统一哈希，避免重复生成相同类名的代码。

在nuxt.config.js中添加如下配置：

export default {
  build: {
    loaders: {
      cssModules: {
        modules: {
          getLocalIdent: (context, localIdentName, localName, options) => {
            // 对指定的共享CSS文件生成固定规则的类名
            if (context.resourcePath.includes('uncommon.css')) {
              // 可以用固定前缀加原类名，或基于文件内容生成唯一哈希
              return `uncommon-${localName}`;
            }
            // 其他CSS模块保持默认哈希生成逻辑
            return require('css-loader/lib/getLocalIdent')(context, localIdentName, localName, options);
          }
        }
      }
    },
    // 启用CSS提取，将公共代码拆分到单独文件
    extractCSS: {
      filename: 'css/[name].css',
      chunkFilename: 'css/[contenthash].css',
      ignoreOrder: true
    }
  }
}

此方案既保留了CSS Modules的局部作用域，又能让共享模块在不同组件中使用统一的类名，同时通过extractCSS将重复代码提取到单独文件。

方法2：全局引入共享CSS模块 #

如果共享样式不需要严格的局部作用域，可以直接将uncommon.css作为全局样式引入，这样只会被打包一次，类名也不会重复。

1. 在nuxt.config.js中全局注册该CSS文件：

export default {
  css: ['~/path/to/uncommon.css']
}

2. 组件中直接使用类名（无需通过CSS Modules的$second对象）：

<template>
  <div class="secondClass">Hello, World</div>
</template>

若仍需局部作用域，可在uncommon.css中用:global()伪类包裹需要共享的样式：

:global(.secondClass) {
  color: #333;
  font-size: 16px;
}

方法3：通过webpack SplitChunks提取公共CSS chunk #

利用webpack的代码拆分功能，将重复引入的CSS模块单独提取到一个chunk文件中，避免重复打包。

在nuxt.config.js的build.extend中配置：

export default {
  build: {
    extend(config, { isClient }) {
      if (isClient) {
        config.optimization.splitChunks = {
          chunks: 'all',
          cacheGroups: {
            commonCSS: {
              name: 'common-css',
              // 匹配目标共享CSS文件
              test: /uncommon\.css$/,
              chunks: 'all',
              enforce: true
            }
          }
        }
      }
    }
  }
}

此配置会将所有组件中引入的uncommon.css合并到common-css.css文件中，彻底消除重复代码。

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