在实际开发中,我们需要将设计稿中的px转换成rem,然后再写入到样式中。postcss-px2rem可以帮助我们自动完成转换。

一、安装依赖

npm install amfe-flexible postcss-px2rem -S
  • amfe-flexible:是rem的适配插件。(例:750px == 10rem)
  • postcss-px2rem:负责将输入的px自动转为rem

二、入口文件main.js里引入amfe-flexible

import "amfe-flexible";

三、在项目根目录创建vue.config.js文件,并完成以下配置:

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    // 设计稿宽度的1/10,一般为75,设计稿为750
                    require('postcss-px2rem')({remUnit: 75}),
                ]
            }
        }
    }
}
Logo

前往低代码交流专区

更多推荐