Vue项目配置 px自动转rem

Vue2项目（vue-cli）

安装指定版本

最新版本@6 会报错：PostCSS plugin postcss-pxtorem requires PostCSS 8

npm i postcss-pxtorem@5.1.1 -D

配置 vue.config.js

module.exports = {
  publicPath: "./",
  productionSourceMap: false, // 生产打包时不输出map文件，加快打包速度
  devServer: {
    disableHostCheck: true,
    // https: true,
  },
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-pxtorem")({
            // 配置文档：https://www.npmjs.com/package/postcss-pxtorem
            rootValue: 37.5, // 根元素字体大小 16/1.25
            unitPrecision: 5, // 转换成rem后保留的小数点位数
            propList: ["*"], // 匹配CSS中的属性，* 代表启用所有属性
            exclude: /(node_module)/, // 忽略一些文件，不进行转换，默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
            selectorBlackList: [".van"], // 要忽略并保留为 px 的选择器
            mediaQuery: false, //（布尔值）允许在媒体查询中转换px
            minPixelValue: 1, // 设置要替换的最小像素值
          }),
        ],
      },
    },
  },
};

Vue3项目（vite）

1.安装

npm install postcss-pxtorem -D

2. 配置 （vite.config.js）

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import postcsspxtorem from 'postcss-pxtorem'

import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    //文件后缀省略导致页面报错404(例：vue文件引入时，webpack只需要文件名)，
    //在vite.config.js配置resolve.extensions中添加对应后缀，vite默认有['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']。
    extensions: ['.vue', '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
    alias: {
      '@': path.resolve(__dirname, './src'),
      '~styles': path.resolve(__dirname, './src/assets/styles'),
      '~components': path.resolve(__dirname, './src/components'),
    }
  },
  css: {
    postcss: {
      plugins: [
        // 配置文档：https://www.npmjs.com/package/postcss-pxtorem
        postcsspxtorem({
          rootValue: 12.8, //根元素字体大小 16/1.25
          propList: ['*'], // 匹配CSS中的属性，* 代表启用所有属性 
          unitPrecision: 5, // 转换成rem后保留的小数点位数
          minPixelValue: 12, // 小于12px的样式不被替换成rem
          exclude: ['node_modules'], //忽略一些文件，不进行转换，比如我想忽略 依赖的UI框架
          // selectorBlackList: [], // 要忽略并保留为 px 的选择器
          // replace : true, // 替换包含 rems 的规则，而不是添加回退
          // mediaQuery : false, // 允许在媒体查询中转换 px
        })
      ]
    }
  }

})

3.配置 （base.css main.js）

base.css

html {
  font-size: .833333vw;
}
body {
  font-size: 0.16rem;
}

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import "@/assets/css/base.css"; // 新增

createApp(App).use(router).use(Antd).mount('#app')