postcss-pxtorem只对指定页面

在使用PostCSS插件postcss-pxtorem时，可以通过配置来选择只对指定页面进行转换。具体的配置方法如下：
1. 首先，在项目中安装postcss-pxtorem插件，并在package.json文件中进行保存：

npm install postcss-pxtorem --save

2. 在项目的utils文件夹下新建一个rem.js文件，用于配置postcss-pxtorem插件。在rem.js文件中，可以指定要转换的页面或选择器，以及转换的配置信息，例如：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 14, // 1rem的大小
      propList: ['*'], // 需要转换的属性列表
      selectorBlackList: [] // 不需要转换的选择器列表
    }
  }
}

3. 然后，在项目的vite.config.js文件中配置postcss插件，并将rem.js作为配置文件引入，例如：

import { defineConfig } from 'vite';
import postcss from 'postcss';
import pxtorem from 'postcss-pxtorem';

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        pxtorem({
          rootValue: 14, // 1rem的大小
          propList: ['*'], // 需要转换的属性列表
          selectorBlackList: [] // 不需要转换的选择器列表
        }),
        // 其他postcss插件
      ]
    }
  },
})

通过以上配置，postcss-pxtorem插件将只对指定页面或选择器中的属性进行转换，其他页面或选择器不受影响。你可以根据需要修改rem.js文件中的配置信息，以适应你的项目需求。<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_51629637/article/details/124660450)[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* [postcss postcss-pxtorem将px转为rem的实现](https://blog.csdn.net/friend_ship/article/details/128225615)[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 ]