Nuxt2构建后CSS类名被修改致样式失效，如何禁用该行为？

核心原因 #

你的问题确实是CSS Modules被自动启用导致的——Nuxt2在部分场景下会默认对CSS文件启用模块化处理，将类名转为哈希ID，但HTML中的类名未同步转换，最终导致样式失效。

解决方案 #

1. 禁用全局CSS文件的模块化处理 #

修改nuxt.config.js的build.extend方法，针对全局Less/CSS文件调整css-loader配置，关闭CSS Modules：

build: {
  extend(config, ctx) {
    // 保留原有ESLint配置
    if (ctx.isDev && ctx.isClient) {
      config.module.rules.push({
        enforce: 'pre',
        test: /\.(js|vue|ts)$/,
        loader: 'eslint-loader',
        exclude: /(node_modules)/
      })
    }

    // 遍历规则，找到处理CSS/Less的loader并禁用Modules
    config.module.rules.forEach(rule => {
      if (rule.test.toString().includes('less') || rule.test.toString().includes('css')) {
        rule.use.forEach(loader => {
          if (loader.loader === 'css-loader') {
            loader.options.modules = false
          }
        })
      }
    })
  }
}

2. 确保Vue组件内