css3 样式自动补齐前缀

不同浏览器内核的 css3 样式兼容 postcss-loader autoprefixer

npm i postcss-loader -D
npm i autoprefixer -D

在某 less 文件中样式加 display: flex

配置 webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                test: /.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "less-loader",
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: () => [
                                require('autoprefixer')({
                                    browsers: ['last 2 version', '>1%', 'ios 7'] // 兼容最新的两个版本，大于 1%， ios 7
                                })
                            ]
                        }
                    }
                ],
            },
        ],
    },
};

报错

处理 新建 postcss.config.js

module.exports = {
  plugins: [
      require('autoprefixer')({
          overrideBrowserslist: ["last 2 version", ">1%", "iOS 7"] // 版本已经不支持 browsers属性，应该使用overrideBrowserslist替换
      })
  ]
}

删除 webpack.config.js 中 postcss-loader 的 options 配置即可

module.exports = {
    module: {
        rules: [
            {
                test: /.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "less-loader",
                    {
                        loader: 'postcss-loader'
                    }
                ],
            },
        ],
    },
};

在构建中查看是否兼容display:flex