[ -webkit-box-orient: vertical ] 打包后丢失问题

最新推荐文章于 2024-04-03 09:10:23 发布

江木

最新推荐文章于 2024-04-03 09:10:23 发布

阅读量741

点赞数

分类专栏： js 文章标签： autoprefixer js

本文链接：https://blog.csdn.net/chjj0904/article/details/83792583

版权

47 篇文章 0 订阅

订阅专栏

最近在做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
   }
 }

深究一下
1.autoprefixer会帮你删除老式过时的代码
2.autoprefixer也会帮你增加新前缀

你可以增加remove: false这个配置项，就不会开启自动移除功能

postcss([ autoprefixer({ remove: false }) ]);
不仅如此，你还可以只让它移除老前缀，不自动增加新前缀postcss([ autoprefixer({ add: false, browsers: [] })]);

关注