webpack之自动补齐css前缀，增强项目兼容性（postcss-loader autoprefixer）

本文主要是介绍webpack之自动补齐css前缀，增强项目兼容性（postcss-loader autoprefixer），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

通过 postcss-loader 和 autoprefixer 两款插件实现

1、安装两款插件

npm i postcss-loader autoprefixer -D

2、在webpack.prod.js中加入以下配置

            {test: /.less$/,use: [MiniCssExtractPlugin.loader,'css-loader','less-loader',{loader: 'postcss-loader',options: {plugins: () => [require('autoprefixer') ({overrideBrowserslist: ['last 2 version', '>1%', 'ios 7']})]}}]},

postcss-loader 执行顺序必须保证在 css-loader 之前，建议还是放在 less或者 sass 等预处理器之后更好。即 loader 顺序：
less-loader -> postcss-loader -> css-loader -> style-loader 或者 MiniCssExtractPlugin.loader。其实 postcss-loader 放在 less-loader 之前问题也不大，平时使用的 less 里面的语法基本不会和 autoprefixer 处理产生冲突的。

其中css-loader和less-loader分别是转化css和less所用，主要区别在于以下部分：

                    {loader: 'postcss-loader',options: {plugins: () => [require('autoprefixer') ({overrideBrowserslist: ['last 2 version', '>1%', 'ios 7']})]}}

last 2 version为兼容浏览器最后两个版本。

以下是经过插件处理后的样式，display: flex被自动加上多个前缀

.search-text{font-size:20px;color:red;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}

 

这篇关于webpack之自动补齐css前缀，增强项目兼容性（postcss-loader autoprefixer）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---