postcss-pxtorem在vue.config.js中的配置

在vue.config.js中配置postcss-pxtorem需要在css.loaderOptions对象中增加postcss对象，然后在postcss对象中增加plugins数组，将postcss-pxtorem插件作为数组元素传入。在插件中，可以设置rootValue、unitPrecision、propList、selectorBlackList、replace、mediaQuery、minPixelValue、exclude等参数。其中，rootValue表示根字体大小，unitPrecision表示转换后的小数点位数，propList表示需要转换的属性列表，selectorBlackList表示不需要转换的选择器列表，replace表示是否替换原有的属性值，mediaQuery表示是否在媒体查询中也进行转换，minPixelValue表示最小的转换像素值，exclude表示需要排除的文件路径。

相关问题

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 ]

postcss-pxtorem配置vue2

在Vue2中配置postcss-pxtorem，你可以按照以下方式进行配置：

方式一：
在vue.config.js中添加以下代码：

const px2rem = require('postcss-px2rem')
const postcss = px2rem({
  remUnit: 75 // 基准大小 baseSize，需要和rem.js中相同
})

module.exports = {
  /* 注意sass，scss，less的配置 */
  productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
  css: {
    loaderOptions: {
      postcss: {
        plugins: \[
          postcss
        \]
      }
    }
  }
}

方式二：
在vue.config.js中添加以下代码：

module.exports = {
  lintOnSave: true,
  css: {
    loaderOptions: {
      postcss: {
        plugins: \[
          require('postcss-px2rem')({
            remUnit: 30 // 配置项，详见官方文档
          }),
          // 其他插件
        \]
      }
    }
  }
}

方式三：
在vue.config.js中添加以下代码：

var px2rem = require('postcss-px2rem');

module.exports = {
  module: {
    loaders: \[
      {
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader"
      }
    \]
  },
  postcss: function() {
    return \[px2rem({remUnit: 75})\];
  }
}

请注意，如果你遇到了"Error: PostCSS plugin postcss-pxtorem requires PostCSS 8"的错误，这可能是因为缺少相应的插件。你需要安装postcss和postcss-loader这两个插件来解决这个问题。
#### 引用[.reference_title]
- *1* *2* [使用postcss-plugin-px2rem和postcss-pxtorem(postcss-px2rem)-px自动转换rem的配置方法-vue-cli3.0](https://blog.csdn.net/JackieDYH/article/details/115463646)[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^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [vue2移动端适配插件‘postcss-pxtorem](https://blog.csdn.net/weixin_61211370/article/details/129299542)[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^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]