Webpack打包之后[-webkit-box-orient: vertical]样式丢失

Posted 2021-12-24 qilj

背景：项目是用的vue全家桶套餐

今天在工作中遇到一个问题，需求是要求文字只能显示3行，超过3行则隐藏且显示 ‘...‘， 于是我加了如下样式在标签里面：

display: -webkit-box;
-webkit-line-clamp: 3;
line-height: 20px;
max-height: 60px;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;

加好之后，测试ok没问题，感觉很完美，现在要提交代码了，为了代码规范，那么多样式写在行间里面感觉是不太好，于是想着把它抽出来写在<style>标签里面吧，在一切就绪准备push的时候，因为热更新 页面刷新了，？？？what, 为啥没有‘...‘了呢，第三行显示完了就没有了（一脸懵逼），去调试面板看了下，-webkit-box-orient: vertical; 这个样式不见了， 这是什么情况。。。

去google上找了一圈，果然不是我一个人遇到这个问题，是因为这个属性被 optimize-css-assets-webpack-plugin插件在编译时删除掉了，T_T

解决办法如下：

方法一：加上注释命令，让autoprefixer编译的时候关闭对这行代码的转换。

/*! autoprefixer: off */
    -webkit-box-orient: vertical;
/*! autoprefixer: off */

方法二：从问题的源头出发，修改webpack.prod.conf.js文件。

注释掉下面代码：

new OptimizeCSSPlugin(
  cssProcessorOptions: config.build.productionSourceMap
    ?  safe: true, map:  inline: false  
    :  safe: true 
)

这段代码本来实现了css的压缩，现在注释后就没有压缩了，所以还需要在配置文件中添加 minimize:true 

const cssLoader = 
   loader: ‘css-loader‘,
   options: 
     sourceMap: options.sourceMap,
     minimize:true
   

 

 

参考文档 https://blog.csdn.net/chjj0904/article/details/83792583