先看问题
原子化 CSS 样式丢失问题及解决方案
在使用原子化 CSS(如 Less.js
、UnoCSS
或 TailwindCSS
)时,可能会遇到页面刷新后所有样式类丢失,再加载时体验较差的问题。这是因为样式通过 JavaScript 动态加载渲染,页面初始时 JavaScript 尚未解析完成,导致样式无法获取。
解决方案
通过给 body
元素设置 visibility: hidden;
,等到 JavaScript 完成解析后再显示页面内容,可以解决这个问题。
CSS 部分:
body {
visibility: hidden;
}
JavaScript 部分:
<script>
window.onload = function() {
document.body.style.visibility = 'visible';
};
</script>
引入 JavaScript 文件:
<script src="./js/uno.global.js"></script>
<script src="./js/less.js"></script>
这样,页面在加载完成后才显示内容,避免用户看到样式丢失的过程,提升了用户体验。