解决webpack打包后-webkit-box-orient: vertical ;消失问题

解决webpack打包后-webkit-box-orient: vertical ;消失问题

通过以下几种方式的测试。我遇到的在vue项目中的-webkit-box-orient: vertical ;消失通过方法三解决了。 有相同问题的同学可以参照以下方法进行偿试。

方法一：将CSS样式添加autoprefixer跳过webpack的css打包

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

方法二：

1.找到配置文件/build/webpack.prod.conf.js文件，注释掉一下代码

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

2.在/build/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 }) ]);1

不仅如此，你还可以只让它移除老前缀，不自动增加新前缀

postcss([ autoprefixer({ add: false, browsers: [] })]);