Webpack the processing of prefixes in CSS compression

In the project created by VUE-CLI, after packaging the project with the default Webpack configuration, you find that the prefix for the style in the CSS file is missing, for example: Flex, which should have a prefix attribute but not (Display:-webkit-flex; &&-webkit-flex:1), resulting in a compatibility issue with styles on the iphone 6s Plus.

Postcss CSS prefix is a processing function, in the default configuration of the project, according to the latest two versions of the browser support to add prefixes, and now the browser should be able to support the flex very well, so, do not add a prefix. For this, we can do the following:

// Vue-loader.config.js = { ......  POSTCSS: [    require ('autoprefixer') ({browsers: ['last]Chrome Versions'last5 Firefox versions'Safari >= 6  "ie > 8'})  ]}

After the above processing, the packaged CSS should have the appropriate prefix, but not so, because in the packaging process, CSS has a compression action, in this action, the compression plug-in (with the Optimize-css-assets-webpack-plugin This plugin will once again handle the CSS prefix, removing the code it considers unnecessary, such as unwanted CSS prefixes. Because the prefix of CSS has already been processed with POSTCSS, so the processing of CSS prefixes here is superfluous, we can do the following:

//Webpack.prod.config.js......ConstOptimizecssplugin = require ('Optimize-css-assets-webpack-plugin')......NewOptimizecssplugin ({cssprocessor:require ('Cssnano'), cssprocessoroptions: {discardcomments: {removeall:true },    //Avoid Cssnano recalculation Z-indexSafetrue,    //Cssnano can typically reduce the size of at least 50% by removing annotations, whitespace, repeating rules, outdated browser prefixes, and making other optimizations .//The Cssnano integrates the functionality of the autoprefixer. The autoprefixer is used to clean up unrelated prefixes. Default incompatible iOS8, some webkit prefixes are removed, such as Flex//so choose Close here, use Postcss's Autoprefixer functionAutoprefixer:false}, Canprint:true    //CssProcessorOptions:config.build.productionSourceMap? {safe:true, map: {Inline:false}}: {safe:true}}),......

After packing again, you will find the prefix you want to appear.

Webpack the processing of prefixes in CSS compression