vite3+vue3项目postcss.config.js自动将px转成rem的报错：[vite] Internal server error: Failed to load PostCSS c...

为vite创建的vue3项目添加自动将px转成rem的插件postcss-pxtorem运行项目报错了！！！这个就很懵了，因为我用vue-cli创建的项目也是一样的postcss.config.js配置没有问题，到这居然挂了。报错内容如下：

image.png

配置信息如下：

//postcss.config.js
module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: [
        'Android 4.1',
        'iOS 7.1',
        'Chrome > 31',
        'ff > 31',
        'ie >= 8',
        'last 10 versions', // 所有主流浏览器最近10版本用
      ],
      grid: true,
    },
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75
      },
      propList: ['*'], // 需要做转化处理的属性，如`hight`、`width`、`margin`等，这里设置为['*']全部，假设需要仅对边框进行设置
    },
  },
}

配置是没有问题的，有问题的是文件后缀名字，将postcss.config.js改成postcss.config.cjs后，重新运行代码，问题解决啦。
其实这个问题很简单，只要往后多看几行报错信息，细心点就能发现啦，但是如果跟我一样看了前面的报错信息就去网上找报错原因和解决办法的话，我是没有找到（后面还是翻出无意中发现后缀名不一样）。所以记录下，希望能为后入坑的有帮助。