vite+vue3如何配置postcss-pxtorem rem

韭菜馅的盒子

已于 2023-08-28 17:03:28 修改

阅读量722

点赞数

文章标签： postcss 前端 javascript

于 2023-08-28 09:27:17 首次发布

本文链接：https://blog.csdn.net/Bdbdbdnnd/article/details/132531925

版权

下载包，一个是pnpm 和npm 自己选择

pnpm add  postcss postcss-pxtorem --save-dev

npm install  postcss postcss-pxtorem --save-dev

还需要在下载一个动态字体大小的插件也是npm和pnpm

pnpm add amfe-flexible

npm i -S amfe-flexible

在main.js中引入

import 'amfe-flexible'

下面的两部很关键，找了很久才找到的希望对你有帮助

在根目录下配置 .postcssrc.cjs文件

// postcss.config.cjs 或者.postcssrc.cjs都可以

module.exports = {
  "plugins": {
    "postcss-pxtorem": {
      rootValue: 37.5, // Vant 官方根字体大小是 37.5
      propList: ['*'],
      selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class，不进行rem转换
    }
  }
}

重新启动项目就可以实现px转为rem了