1、安装 flexible和 postcss-px2rem

yarn add lib-flexible --save

yarn add postcss-px2rem --save

2、 引入lib-flexible

在项目入口文件main.js 中引入lib-flexible

import ‘lib-flexible’

注意事项(important): 由于flexible会动态给页面header中添加标签,所以务必请把目录 public/index.html 中的这个标签删除!!!

3、配置postcss-px2rem

px2rem的配置放在vue-cli3 项目中vue.config.js中,具体配置内容:

module.exports = {

    css: {

        loaderOptions: {

            css: {},

            postcss: {

                plugins: [

                    require('postcss-px2rem')({

                        remUnit: 37.5

                    })

                ]

            }

        }

    },

}

Logo

前往低代码交流专区

更多推荐