前端打包 -webkit-box-orient 丢失问题
问题:前端打包之后,文本多行显示省略号的关键css语句 -webkit-box-orient: vertical;属性丢失,导致样式不生效。
解决方案:
1、添加注释
在网上找了一种方案,把autoprefixer关掉
.bk-table .cell {
/* autoprefixer: off */
-webkit-box-orient: vertical!important;
-moz-box-orient: vertical;
/* autoprefixer: on */
}
这样确实解决了编译丢失的情况,但会在编译过程中报warning:
‘(Emitted value instead of an instance of Error)
autoprefixer: \css\share.css:199:3: Second Autoprefixer control comment was ignored.
Autoprefixer applies control comment to whole block, not to next rules.’
2、解决warning
打开webpack.prod.conf.js文件进行配置autoprefixer: {remove: false}
(已验证,推荐)
new OptimizeCSSPlugin({
cssProcessorOptions: {
safe: true,
autoprefixer: {remove: false}
}
})
另一种方案也可解决warning(待验证):
/* autoprefixer: ignore next */
-webkit-box-orient: vertical;
可以解决warning。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾(3.3-3.9)
· AI 智能体引爆开源社区「GitHub 热点速览」