postcss-loader处理css兼容

postcss是JavaScript转换样式的工具，这个工具能处理css兼容问题。就是这个工具能给我们写的css代码添加一些兼容的前缀

安装

xxxxxxxxxx
npm install --save-dev autoprefixer@10.4.7
npm install --save-dev postcss@8.4.14
npm isntall --save-dev postcss-loader@7.0.0
npm install --save-dev postcss-preset-env@7.7.1

在项目根目录下创建 postcss.config.js 文件

xxxxxxxxxx
// postcss.config.js
module.exports = {
    plugins: {
        "autoprefixer":{
            "overrideBrowserslist":[
                // 兼容IE7以上浏览器
                "ie >= 8",
                // 兼容火狐版本号大于3.5浏览器
                "Firefox >= 3.5",
                // 兼容谷歌版本号大于35浏览器,
                "chrome  >= 35"
            ]
        }
    }
}

修改 webpack.config.js 文件

xxxxxxxxxx
rules: [
    {
        test: /\.css$/,
        use:[MiniCssExtractPlugin.loader ,"css-loader","postcss-loader"]
    },
    {
        test: /\.less$/,
        use:[MiniCssExtractPlugin.loader ,"css-loader","postcss-loader","less-loader"]
    },
    {
        test: /\.(scss|sass)$/,
        use:[MiniCssExtractPlugin.loader ,"css-loader","postcss-loader","sass-loader"]
    }
]

修改CSS文件

xxxxxxxxxx
.root{
    width: 400px;
    height: 200px;
    background-color: #f1f1f1;
    display: flex;
}