問(wèn)題描述vue v-cloak 在webpack編譯css后不起作用問(wèn)題出現(xiàn)的環(huán)境背景及自己嘗試過(guò)哪些方法在css文件中寫入[v-cloak] { display: none;
}不起作用，原因是項(xiàng)目采用了css編譯，html中的所有的類都是采用 :class="style.className"的形式，css編譯后形成鍵值對(duì)的形式，key值是html中的className,value值是key + '-哈希值'相關(guān)代碼// 請(qǐng)把代碼文本粘貼到下方（請(qǐng)勿用圖片代替代碼）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,
}
})
}
1 回答
湖上湖
TA貢獻(xiàn)2003條經(jīng)驗(yàn) 獲得超2個(gè)贊
目測(cè)使用了 css module, 需要切換到全局 scope.
:global([v-cloak]) { display: none;
}添加回答
舉報(bào)
0/150
提交
取消