vue-cli3 使用 postcss-pxtorem & postcss-px2rem

使用 postcss-pxtorem

1. 安装 postcss-pxtorem

    npm install postcss-pxtorem -S 

2. 在vue.config.js 中添加

module.exports = {

    lintOnSave: true,

    css: {

        loaderOptions: {

            postcss: {

                plugins: [

                    require('postcss-pxtorem')({

                        rootValue : 37.5, // 换算的基数

                        propList  : ['*'],

                    }),

                ]

            }

        }

    },

}

---

使用 postcss-px2rem

1. 安装 postcss-px2rem

    npm install postcss-px2rem -S 

2. 在vue.config.js 中添加

module.exports = {

    lintOnSave: true,

    css: {

        loaderOptions: {

            postcss: {

                plugins: [

                    require('postcss-px2rem')({remUnit: 30}), // 换算的基数

                ]

            }

        }

    },

}

然后重启项目就可以啦！