2021-03-08

vue-cli3.0使用amfe-flexible + postcss-pxtorem，适配移动端并px自动转rem

奔跑的IT小白 2019-09-30 17:21:17  3494  收藏 9
分类专栏： vue 文章标签： vue-cli3移动端适配
版权
已初始化vue-cli3项目

第一步：下载 postcss-pxtorem（npm i postcss-pxtorem -D）

第二步：下载 amfe-flexible（npm i amfe-flexible -S）

第三步：在main.js中引入amfe-flexible

import 'amfe-flexible/index'
第四步：新建vue.config.js，配置postcss-pxtorem

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({ // 把px单位换算成rem单位
                        rootValue: 75, // 换算的基数(设计图750的根字体为75)
                        // selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
                        propList: ['*']
                    })
                ]
            }
        }
    },
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
        } else {
            // 为开发环境修改配置...
        }
    }
}
第五步：重启项目，就可以看到样式px转为rem

原文链接：https://blog.csdn.net/sinat_41087851/article/details/101781228