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 ]