postcss-pxtorem配置vue3

在Vue 3中配置postcss-pxtorem，你可以按照以下步骤进行操作：

1. 打开项目根目录下的`postcss.config.js`文件，如果没有该文件，则需要手动创建一个。

2. 在`postcss.config.js`文件中，添加以下代码：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5, // 设置根字体大小，根据设计稿的尺寸来调整
      propList: \['*'\], // 需要转换的属性，这里设置为全部
      selectorBlackList: \['.norem'\] // 过滤掉.norem-开头的class，不进行rem转换
    }
  }
}

3. 保存文件并重新编译项目，postcss-pxtorem插件将会根据配置将像素单位转换为rem单位。

请注意，根据你的设计稿尺寸和需求，你可能需要调整`rootValue`的值来适应你的项目。同时，你也可以根据需要修改`propList`和`selectorBlackList`来满足你的具体需求。
#### 引用[.reference_title]
- *1* [vue-cli3 配置 postcss-pxtorem](https://blog.csdn.net/weixin_38578293/article/details/88775172)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [vue3.0中使用postcss-pxtorem](https://blog.csdn.net/qq_35432904/article/details/105506831)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [Vue3中postcss的安装及配置](https://blog.csdn.net/weixin_46547740/article/details/120908591)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]