[ -webkit-box-orient: vertical ] 打包后丢失问题
vue项目中,多行文本样式显示省略号,用到了-webkit-box-orient: vertical这个属性,本地正常,打包线上后,该属性丢失。webpack打包时把这个样式过滤掉了。
网上解决方案有以下:
1. 加上这注释命令
/*! autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */
2. optimize-css-assets-webpack-plugin 从
这个插件的问题源头解决
注释掉webpack.prod.conf.js
中下面的代码
new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true } }),
这段代码实现了css的压缩 注释后css就没有压缩,所以 还要在utils.js中添加, minimize:true
const cssLoader = { loader: 'css-loader', options: { sourceMap: options.sourceMap, minimize:true } }
3. 在 webpack.config.js 文件中,找到 new webpack.optimize.UglifyJsPlugin,在里面添加一条 mangle:false,这个的意思是删除注释。这样打包时就注释和这行代码就不会连在一起了
【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步