bug记录之vuecli5自定义cssmodules哈希类名

项目场景：

场景：用vue3+tsx开发的项目，直接每个页面引入单独的样式文件会造成全局样式污染，所以需要开启cssmodule，vuecli默认配置是只有哈希值，不显示类名，debug的时候找页面会很不好找，网上也没有相关文章说如何解决这个问题，所以分享下我是如何解决这个问题的

---

问题描述

根据文档中的来配置会报错,官方文档配置代码如下

        loaderOptions: {
            css: {
                // 注意：以下配置在 Vue CLI v4 与 v3 之间存在差异。
                // Vue CLI v3 用户可参考 css-loader v1 文档
                // https://github.com/webpack-contrib/css-loader/tree/v1.0.1
                modules: {
                    localIdentName: '[name]-[hash]'
                },
                localsConvention: 'camelCaseOnly'
            }
        }

会报如下错误

---

原因分析：

vuecli5是基于webpack5的，翻了文档，这个属性在webpack5中不是这么配置的。

---

解决方案：

删除掉这个localsConvention报错选项，这时候启动项目会发现，之前写的vue文件中的样式以及element库的样式全部没了，这时候在配置项里加个auto自动匹配就行。最终配置代码如下

   loaderOptions: {
            css: {
                modules: {
                    auto: true,//自动匹配符合modules规则的样式文件
                    localIdentName: "[path][name]__[local]--[hash:base64:5]",
                },
            }
        }