Nuxt 2引入monorepo共享全局SCSS时如何关闭类名哈希

在monorepo架构下维护多套Vue SPA，所有应用共享独立工作区的全局scss公共样式包，当用Nuxt 2替换其中一个应用时，按官方文档引入预处理器依赖、在nuxt.config.js的css字段引入外部公共样式文件后，明明样式已经被注入页面，但原本写的原生类名被随机哈希成无意义字符串，导致样式和组件内写的类名完全不匹配、无法生效。此前尝试手动在build.extend中新增scss处理规则、配置cssModules字段强制指定类名格式，均没有效果。

核心根因 #

• Nuxt 2 内置的webpack样式处理逻辑，本应默认对非组件style module标签、非.module后缀的样式文件关闭类名哈希
• 但因为公共样式包是Nuxt项目目录外的独立工作区路径，没有被默认规则的范围覆盖，错误匹配到了默认开启类名哈希的css-loader处理分支
• 之前手动push新规则的操作存在本质缺陷：webpack按规则数组从上到下顺序匹配，手动追加的规则位于数组末尾，会被前面已经命中scss文件的默认规则优先拦截，配置逻辑完全不会执行

可直接落地的配置步骤 #

1. 先清理无效配置
   删掉之前在build.extend里手动push的scss处理规则，避免和Nuxt内置规则冲突导致重复打包、逻辑混乱。
2. 修改内置css-loader的识别规则，从根源关闭全局样式的类名哈希
   不新增自定义规则，直接在extend中定位到Nuxt内置的scss处理规则，调整css-loader的CSS Modules识别范围，只对需要模块化的文件开启哈希，其余所有全局样式保留原生类名：

   // nuxt.config.js
   const path = require('path')
   // 你的公共全局样式的绝对路径
   const globalStylePath = path.resolve(__dirname, '../common/styles/index.scss')
   
   export default {
     // 正常通过css字段引入全局样式
     css: [globalStylePath],
   
     build: {
       extend(config) {
         // 定位到内置的scss处理规则
         const scssRule = config.module.rules.find(rule => rule.test.test('test.scss'))
         // 定位到规则链中的css-loader
         const cssLoader = scssRule.use.find(item => item.loader.includes('css-loader'))
   
         // 调整css-loader的模块识别逻辑
         cssLoader.options.modules = {
           // 仅对带.module后缀的样式文件开启CSS Modules类名哈希
           auto: /\.module\.(css|scss|sass|less)$/i,
           // 需要开启模块化的文件保留默认类名格式，不需要的文件走原生类名输出
           localIdentName: '[local]___[hash:base64:5]'
         }
       }
     }
   }
   

3. 后续扩展适配
   配置生效后，公共样式包内的通用类、Bootstrap Vue自带的类名都会完全保留原生字符串，不会被哈希，后续接入公共包里的Vue组件时，组件内写的原生类名样式可以直接匹配生效，不需要额外适配。

避坑提醒 #

• 不要直接全局关闭CSS Modules功能，否则后续真的需要编写组件级模块化样式的场景会完全失效
• 不要随意在extend里新增重复的样式处理规则，Nuxt已经内置了完整的scss、Vue单文件style块的处理链路，重复加规则很容易因为webpack的匹配优先级问题不生效，甚至造成样式重复打包
• 之前单独配置localIdentName: '[local]'不生效，本质是这个参数只作用于被识别为CSS Modules的文件处理分支，对走普通全局样式输出逻辑的分支没有约束力

补充：如果后续需要给所有scss文件注入全局自定义变量，可在sass-loader的配置中通过prependData字段实现，不会影响类名的输出逻辑。

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