Ethan Zhu
©️朱俊辉
All Rights Reserved.

webpack 打包编译-webkit-box-orient: vertical 后消失

最近vue项目中需要给文字多行缩略显示省略号,easy,几句css就能实现,css如下:

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;

后来打包发布上线,发现样式少了一句 -webkit-box-orient: vertical;坑!

网上查了下,说是webpack打包时autoprefixer会给我们的css自动添加前缀,也会给我们的css进行删改,就这样上面这段css样式就被无情的删掉了.

网上的解决方案是这样的:

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

但是我在我的项目中发现不起作用

最终解决方案:

optimize-css-assets-webpack-plugin这个插件的问题

注释掉webpack.prod.conf.js中下面的代码

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

这样之后css会没有压缩

还需要进行压缩,在build文件夹下的utils中加入下面

2018-10-11
暂无评论

发表评论