vue/cli3 使用"amfe-flexible"和"post

安装

1.安装amfe-flexible

npm install amfe-flexible -s

2.安装postcss-pxtorem

npm install postcss-pxtorem -d

设置

1.main.js 引入

import "amfe-flexible";

2.postcss.config.js 里的内容

module.exports = {
    plugins: {
        autoprefixer: {
            browsers: ["Android >= 4.0", "iOS >= 7"]
        },
        "postcss-pxtorem": {
            rootValue: 75,
            propList: ["*"],
            selectorBlackList: [".van"] // 设置class忽略开头，以.van开头的class会被忽略转化，这里是忽略有赞ui的
        }
    }
};

说明

1.设计稿件为750px的设计稿件
2.在.vue 文件里直接书写px单位。例如750px等等。
3.设置忽略

// px变换 rem
.convert {
    font-size: 16px; // converted to 1rem
}
 
// Px 或者 PX 会被忽略转化，直接为px，但是我们的开发软件vscode 一些插件校验不通过，不予许有大写，这里需要使用 /* prettier-ignore */忽略工具的校验。
/* prettier-ignore */
.ignore {
    border: 1Px solid; // 忽略
    border-width: 2PX; // 忽略
}