在Vue 3項目中，vite可以完全替代webpack，提供了快速的開發(fā)環(huán)境和快速的生產(chǎn)構建。在vite中，我們可以使用import來導入樣式文件，而不用再配置loader。下面將介紹如何在vite中配置CSS。

首先，我們需要安裝postcss相關工具：

npm install postcss autoprefixer -D

接著，在項目根目錄下創(chuàng)建postcss.config.js文件，并添加以下代碼：

module.exports = {
plugins: [
require('autoprefixer')
]
}

這里的autoprefixer插件會自動添加CSS3前綴，確保在各種瀏覽器中都能正常顯示。除了autoprefixer，我們還可以安裝其他postcss插件，比如cssnano用于壓縮CSS代碼。

接下來，我們在vite.config.js中進行CSS的配置。首先需要安裝相關依賴：

npm install postcss-import sass -D

postcss-import插件用于導入其他CSS文件，而sass用于編譯SCSS文件。

在vite.config.js中，我們可以添加一個CSS相關的配置：

export default defineConfig({
plugins: [
vue(),
vitePluginImport({
libs: [
{
libraryName: 'element-plus',
esModule: true,
resolveStyle: (name) =>{
return `element-plus/lib/theme-chalk/${name}.css`
}
}
]
})
],
css: {
postcss: {
plugins: [
require('postcss-import')(),
require('tailwindcss')(),
require('autoprefixer')()
]
},
preprocessorOptions: {
scss: {
additionalData: '@import "./src/styles/variables.scss";'
}
}
}
})

這里的css選項配置了postcss插件、SCSS變量等相關選項。我們可以使用require來導入postcss插件。preprocessorOptions中的additionalData配置項用于全局導入變量。

除了以上配置，我們還可以在單個組件中使用來開啟CSS模塊化，防止全局污染。在模塊化的樣式文件中，我們可以使用組件中的類名來限定樣式的作用域。

以上就是關于vite中CSS配置的介紹。vite的CSS配置非常簡單，并且支持各種預處理器和postcss插件，是一個非常優(yōu)秀的工具。