前言

从名字上就可以勉强看出来，这个插件是依赖postcss的，单独配置它是不生效的，我在装这个插件的时候完美的踩了这个坑，通过查阅相关文档很快就安装好了。

Postcss文档

postcss-pxtorem配置文档

---

使用方法

1. 安装插件

> npm install postcss-loader postcss-pxtorem

1. webpack.config.js的配置，这里主要是让postcss-loader生效，postcss-pxtorem因为是依赖于postcss-loader的插件所以是在postcss.config.js中配置的，而不是在这里。

module:{
    rules:[
        {
            test: /\.css$/i,
            use: [
                MiniCssExtractPlugin.loader,
                "css-loader",
                "postcss-loader"
            ],
        },
        {
            test: /\.less$/i,
            use: [
                MiniCssExtractPlugin.loader,
                "css-loader",
                "postcss-loader",  //因为loader的规则是链式处理，postcss-loader是处理css的，所以放在css之后，而不是less之后
                "less-loader"
            ],
        },
    ],
},

1. 配置postcss-pxtorem 项目根目录创建一个postcss.config.js文件（与package.json同级），默认内容如下。

module.exports = {
    plugins: [
        require('postcss-pxtorem')({
            rootValue:16,//结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
            propList: ['*'],
            exclude: /node_modules/i  //这里表示不处理node_modules文件夹下的内容
        })
    ]
}

---

如下图，这样就成功了。