vue.config.js中modules属性替换为requireModuleExtension致使element样式不生效

最近在起一个老项目时，编译报错，提示modules属性已失效，请替换为requireModuleExtension，当时想都没想就直接把modules字段替换成了requireModuleExtension，也没想着去翻阅一下官网更改以后的这个属性如何设置,设置以下：

css: {
    // 是否使用css分离插件 ExtractTextPlugin
    // extract: true, //注释css热更新生效
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {},
    // 启用 CSS modules for all css / pre-processor files.
    // modules: false
    requireModuleExtension: false
}复制代码

后来就发现一个问题，项目中element组件样式不生效，开始还没往这个属性修改上去想，想着是别人写的项目代码，多是哪边引用有问题，检查来检查去死活又查不出代码上的问题，这时就以为事情有点诡异了，冷静了一下子以后就查看本身修改了哪里，发现把requireModuleExtension属性注释掉就行了，本着不懂就要搞清楚的思想，去官网查了一下这个属性设置，官网是这个介绍的看到了吧，requireModuleExtension跟modules正好是相反的。设置成requireModuleExtension: true就能够了。
至于为何设置成requireModuleExtension: true会致使样式不生效，大体缘由是这样的， css modules会将style中的类名编译成一个哈希字符串，dom中使用对应的style.xxx这种语法时会被编译成对应的哈希字符串，这样的作法能够避免样式污染，若是dom中没有按照style.xxx的模式去编写的话最终结果就是dom中的chass没有被编译成hash字符串，所以类名对不上会致使样式不生效。