vue v-cloak 不起作用

Question

问题描述vue v-cloak 在webpack编译css后不起作用问题出现的环境背景及自己尝试过哪些方法在css文件中写入[v-cloak] {  display: none; }不起作用，原因是项目采用了css编译，html中的所有的类都是采用 :class="style.className"的形式，css编译后形成键值对的形式，key值是html中的className,value值是key + '-哈希值'相关代码// 请把代码文本粘贴到下方（请勿用图片代替代码）tmpl.html:<div :class="[style.bannerImg, style.bgimg]">     <span :class="[style.bgimg, style.bannerAnimatioin]"></span></div>style.css.bgimg{    position: relative;    width: 100%;    background-size: 100% 100%;    background-repeat: no-repeat; }.bannerImg {    height: 5.64rem; }组件的js文件中引入html和css文件import template from './tmpl.html';let style = require('./style.css');module.exports.createApp = function () {    return new Vue({         template,        data: {             style,         }     }) }

Answer 1

目测使用了 css module, 需要切换到全局 scope.

:global([v-cloak]) {  display: none;
}