vite 配置postcss

由于vite 官网对于postcss的描述过少，导致我在配置的时候出现了一些错误：在vite config里面使用标准的postcss配置

[vite] Internal server error: postcssConfig.plugins.slice is not a function

首先在外部创建postcss.config.js用我们熟悉的写法是可以的，但是我们的目的是在vite.config.js里面配置。

我们首先需要导入使用的插件，任何导入方式都是会被转化为es模块，然后初始化插件及配置项后，放入plugins数组里面就可以正常使用；

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";
import pxtovw from 'postcss-px-to-viewport'
const loder_pxtovw=pxtovw({
    viewportWidth: 200,
    viewportUnit: 'vw'
})
export default defineConfig({
    plugins: [vue()],
    css: {
        postcss:{
            plugins: [loder_pxtovw]
        }
    },
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "src")
        }
    }
})