由于vite 官網(wǎng)對于postcss的描述過少纸巷,導(dǎo)致我在配置的時候出現(xiàn)了一些錯誤:在vite config里面使用標準的postcss配置
[vite] Internal server error: postcssConfig.plugins.slice is not a function
首先在外部創(chuàng)建postcss.config.js用我們熟悉的寫法是可以的畏腕,但是我們的目的是在vite.config.js里面配置。
我們首先需要導(dǎo)入使用的插件厕诡,任何導(dǎo)入方式都是會被轉(zhuǎn)化為es模塊,然后初始化插件及配置項后营勤,放入plugins數(shù)組里面就可以正常使用灵嫌;
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")
}
}
})