css打包丢失,webpack打包build时css样式-webkit-box-orient丢失问题的解决方案

最近遇到一个奇怪的问题,在设置超出n行即显示省略号的css时,开发环境都没有问题,而build之后发现不好使,通过调试发现是-webkit-box-orient这个样式丢失了

我写的css样式display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

overflow: hidden;

打包之后的css样式,缺少-webkit-box-orientdisplay: -webkit-box;

-webkit-line-clamp: 2;

overflow: hidden;

初步认定这是webpack打包的问题(开发环境没问题,正式环境有问题),经过查找资料发现如下解决方案,在-webkit-box-orient这个样式的前后加两句注释即可display: -webkit-box;

/*! autoprefixer: off */

-webkit-box-orient: vertical;

/*! autoprefixer: on */

-webkit-line-clamp: 2;

overflow: hidden;

autoprefixer插件用来自动补全css兼容样式,比如当我们写display:flex样式的时候,实际编译后可能是这样的display: -ms-flexbox;

display: flex;

这就避免了我们在写css代码的时候,每次都要自己去写兼容的css,即耗费脑筋,又不一定写全,可谓是一个解决css兼容性的利器啊。

如果在CSS的某些部分不需要自动检测,可以使用控制注释来禁用Autoprefixer。在下面的示例中,将在整个b规则范围内Autoprefixer,而不仅仅是在注释之后a {

transition: 1s; /* it will be prefixed */

}

b {

/* autoprefixer: off */

transition: 1s; /* it will not be prefixed */

}

还可以递归地使用注释:/* autoprefixer: off */

@supports (transition: all) {

/* autoprefixer: on */

a {

/* autoprefixer: off */

}

}

8e2dfcf80b7cbce47509f3cec4fc458a.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值