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

1,938 阅读2分钟

最近在起一个老项目时,编译报错,提示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…