Vue-cli打包后css样式出不来的解决办法

本文介绍了一种解决Vue移动端项目中CSS样式丢失的方法,通过在根字体大小设置中添加!important优先级标识,确保了REM布局下的样式正确显示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

因为用vue做的大部分项目都是移动端,关于css样式不出来的解决办法

针对rem布局:

我们App.vue里肯定设置了如下样式

<template>
  <div id="app">
	  <!-- 组件缓存 -->
	  <keep-alive>
    	<router-view></router-view>
	  </keep-alive>
  </div>
</template>
<script>
export default {
	name: 'App',
}
</script>
<style>
body,p,ul,li,ol,dl,dd,h1,h2,h3,h4,h5,h6,td,input,textarea,select,option{
	margin: 0;
	padding: 0;
}
/* html,body{
	height:100%;
} */
html{
	font-size:26.67vw;
}
body{
	font-family: "微软雅黑";
	background:white;
}
ul,ol,li{
	list-style:none;
}
a{
	text-decoration: none;
	display:block;
}
img{
	border: none;
	display:block;
}
.router-link-active {
  text-decoration: none;
}
</style>




只需要在根字体大小下加一个 !important就可以解决css样式丢失问题

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值