最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了。
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
}
}
https://github.com/postcss/autoprefixer/issues/776
深究一下
1.autoprefixer会帮你删除老式过时的代码
2.autoprefixer也会帮你增加新前缀
你可以增加remove: false这个配置项,就不会开启自动移除功能
postcss([ autoprefixer({ remove: false }) ]);
不仅如此,你还可以只让它移除老前缀,不自动增加新前缀postcss([ autoprefixer({ add: false, browsers: [] })]);