[ -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,这个的意思是删除注释。这样打包时就注释和这行代码就不会连在一起了