Ruoyi框架中使用postcss-pxtorem实现px转rem自适应

在Ruoyi框架中使用'postcss-pxtorem'可以实现自动将CSS中的px单位转换为rem单位，使得在不同设备上显示效果更加一致。具体步骤如下：

在项目根目录下创建'postcss.config.js'文件，并输入以下代码：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 16, // 设计稿尺寸/10
      propList: ['*']
    }
  }
}

其中，'rootValue'表示设计稿的尺寸除以10，'propList'表示要转换的CSS属性，设置为['*']表示所有属性都要转换。

安装依赖

执行以下命令安装相关依赖：

npm install postcss postcss-loader postcss-pxtorem --save-dev

在'vue.config.js'中配置'postcss-loader'

找到'vue.config.js'文件，并在其中添加以下代码：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 16,
            propList: ['*']
          })
        ]
      }
    }
  }
}

重新编译项目

执行以下命令重新编译项目：

npm run build

验证效果

在CSS中使用px单位，编译后可以看到自动转换为rem单位。在不同设备上查看页面，可以发现显示效果更加一致。