报错：

Failed to load PostCSS config (searchPath: E:/A-code/demo): [ReferenceError] module is not defined in ES module scope

之前一直使用的是vue-cli开发的，然后今天上面说要使用新的vite开发新项目，然后我一开始想着这配置应该跟原来的vue-cli差不多，然后直接着手配置了，但是到了配置viewport的时候报错了！

先看看报错的时候的文件情况

然后这样就报错了

[plugin:vite:css] Failed to load PostCSS config (searchPath: E:/A-code/demo): [ReferenceError] module is not defined in ES module scope

配置vite.config.js

然后我去查阅这个vite的文档，发现这个东西已经内置到vite了，不用创建文件，然后我就在vite.config.js配置文件引入模块，这样即可完成配置

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

import pxtovw from 'postcss-px-to-viewport'

const my_pxtovw = pxtovw({
  //这里是设计稿宽度 自己修改
  unitToConvert: "px", // 要转化的单位
  viewportWidth: 1920, // UI设计稿的宽度
  unitPrecision: 6, // 转换后的精度，即小数点位数
  propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
  viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
  fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
  selectorBlackList: [], // 指定不转换为视窗单位的类名，
  minPixelValue: 12, // 默认值1，小于或等于1px则不进行转换
  mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
  replace: true, // 是否转换后直接更换属性值
  exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
  landscape: false // 是否处理横屏情况
  })

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server:{
    port: 3000
  },
  css:{
    postcss:{
      plugins:[my_pxtovw]
    }
  }
})

最后

不要忘记把根文件的postcss.config.js删除，最后文件情况如下