-webkit-box-orient: vertical; 多行文本省略号样式失效丢失问题

现象

使用webpack压缩打包vue项目，遇到一个问题，文本多行显示省略号的关键css语句 -webkit-box-orient: vertical;莫名其妙丢失失效了。查阅资料，有不少人提出在改样式前后添加注释（后处理程序）：

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

再次打包，发现样式恢复正常。然后控制台却多出一条警告：

‘(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.’

原因

正如警告中所说，以上的css处理语句控制的应该是整个css块，而不是在此之后的css。

处理

将此处修改为：

/* autoprefixer: ignore next */
-webkit-box-orient: vertical;

然后再打包就正常

2020-6.22修订

出现设置以上内容，依旧不生效问题，故发现以下解决方案也可

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