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;
}