vite6将弃用cjs(CommonJS )采用ESM(ESModule),所有的js文件将编译为ESM语法,参考https://cn.vitejs.dev/guide/troubleshooting
基于ESM方式,我们需要对导出导入方式和postcss插件加载方式进行调整
postcss.config.js
import autoprefixer from 'autoprefixer'
import tailwindcss from 'tailwindcss'
export default {
plugins: [
tailwindcss(),
autoprefixer(),
]
}
如果是在vite.config.ts中配置的postcss,require() 是 nodejs的方法,自然无法使用了
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import autoprefixer from 'autoprefixer'
import tailwindcss from 'tailwindcss'
export default defineConfig({
...
css: {
postcss: {
plugins: [
//require('tailwindcss'),
//require('autoprefixer'),
tailwindcss(),
autoprefixer(),
]
}
}
})
如果postcss插件使用了px转vw,一定要写在 autoprefixer()
后面
export default defineConfig({
...
css: {
postcss: {
plugins: [
//require('tailwindcss'),
//require('autoprefixer'),
tailwindcss(),
autoprefixer(),
postcsspxtoviewport8plugin({...})
]
}
}
})