vue-cli 打包编译 -webkit-box-orient: vertical 消失的解决办法

1,243 阅读1分钟

今天项目第一次打包上线发现控制块元素显示的文本的行数的样式没有起作用,检查发现是打包后

-webkit-box-orient: vertical

这个属性被 optimize-css-assets-webpack-plugin插件在编译时删除掉了。

解决办法如下:

将webpack.prod.conf.js文件中关于optimize-css-assets-webpack-plugin的配置项由

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

改为

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

[参考](https://github.com/cssnano/cssnano/issues/357)