postcss-pxtorem插件配置

postcss-pxtorem插件的配置可以通过在vue.config.js配置文件中引入并设置相关参数实现。在plugins选项中添加postcss-pxtorem插件，并在该插件的配置中设置rootValue和propList属性。其中，rootValue属性用于指定转换比例，将px转换为rem，propList属性用于指定需要转换的CSS属性。例如，可以将rootValue设置为37.5，以适配vant插件的设计稿，propList可以设置为['*']以转换所有属性。以下是一个配置示例：

const pxtorem = require('postcss-pxtorem');

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          pxtorem({
            rootValue: 37.5, // 根据自己的设计稿配置，这里配置的是宽度375的设计稿（如果使用了vant插件）
            propList: ['*'],
            selectorBlackList: ['van-circle__layer'] // 可选，需要忽略的CSS选择器
          })
        ]
      }
    }
  }
};

这样配置后，postcss-pxtorem插件就会按照指定的比例将CSS文件中的px单位转换为rem单位。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [postcss-pxtorem 插件的配置](https://blog.csdn.net/weixin_58414196/article/details/123639073)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [vue移动端项目rem自适应适配插件postcss-pxtorem的使用](https://blog.csdn.net/weixin_51697449/article/details/121417760)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]