vueCli4使用vant+postcss(VW)后导致样式失效，requireModuleExtension的问题

我使用vue+postcss+vant开发移动端的时候，我这边使用的是vue-cli4,(脚手架4)，我引入toast跟button后我发现样式没引入，找了半天，大家知道什么问题么，特此记录下，为防止大家跟我踩一样的坑，我早vue.config.js中使用了如下： css: { // 是否使用css分离插件 ExtractTextPlugin extract: false, // 开启 CSS source maps? sourceMap: false, // 启用 CSS modules for all css / pre-processor files. requireModuleExtension: true, },
我将requireModuleExtension设置为false了，我们将它设置为true就可以了。
事情是这样的我本来设置的是:`css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: false,
// 开启 CSS source maps?
sourceMap: false,
// 启用 CSS modules for all css / pre-processor files.
module: true,
},``
// v3用modules v4用requireModuleExtension
modules: false,
我使用的vue-cli4
因此v4只能使用requireModuleExtension，而我只改了属性没改值，
requireModuleExtension跟modules正好是相反的， 因为配置了loaderOptions.css, 尽管requireModuleExtension的值为默认值，我们也需要指出。之前v3的module我们先说下什么意思，就是设置我们的css防止重名，css modules会将style中的类名编译成一个哈希字符串，dom中使用对应的style.xxx这种语法时会被编译成对应的哈希字符串，这样的做法可以避免样式污染，如果dom中没有按照style.xxx的模式去编写的话最终结果就是dom中的chass没有被编译成hash字符串，因此类名对不上会导致样式不生效。
官网的说法：
css.modules#
从 v4 起已弃用，请使用css.requireModuleExtension。 在 v3 中，这个选项含义与 css.requireModuleExtension 相反。

css.requireModuleExtension#
Type: boolean

Default: true

默认情况下，只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块。设置为 false 后你就可以去掉文件名中的 .module 并将所有的 *.(css|scss|sass|less|styl(us)?) 文件视为 CSS Modules 模块。

提示

如果你在 css.loaderOptions.css 里配置了自定义的 CSS Module 选项，则 css.requireModuleExtension 必须被显式地指定为 true 或者 false，否则我们无法确定你是否希望将这些自定义配置应用到所有 CSS 文件中。
-cli