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字符串，因此类名对不上会导致样式不生效。
css modules可参考阮一峰的这篇文章：www.ruanyifeng.com/blog/2016/0…