在配置對CSS文件版本進行編譯前，我們需要先安裝一個插件，這個插件叫做`postcss`，它可以讓我們在編譯CSS文件時使用一些比較新的特性。我們可以通過以下命令來安裝該插件：

npm install postcss -D

接下來，我們需要在`vite.config.js`文件中進行一些配置。我們可以使用以下的代碼來配置CSS文件的版本：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
css: {
postcss: {
plugins: [
require('postcss-preset-env')()
]
}
}
})

在上面的代碼中，我們使用`postcss-preset-env`插件來對CSS版本進行編譯。該插件會根據我們在`package.json`文件中所配置的`browserslist`選項來對CSS文件進行相應的版本控制。如果我們需要對該選項進行修改，只需在`package.json`文件中增加以下配置：

"browserslist": [
"last 1 version",
">1%",
"not ie<= 8"
]

上面的代碼中，我們定義了瀏覽器的版本要求。我們可以根據項目的需求進行相應的配置。

最后，我們需要在我們的vue文件中使用CSS，并運行`npm run dev`命令來啟動頁面的開發環境。我們可以在如下代碼中看到如何在vue文件中使用CSS：

在上面的代碼中，我們定義了一個顏色為紅色的`.app`樣式，并在HTML代碼中使用該樣式。

總的來說，配置對CSS文件版本進行編譯并不難。我們只需在`vite.config.js`文件中增加相應的代碼，然后在vue文件中使用CSS即可。在使用過程中，我們還需要注意對`browserslist`選項進行相應的配置。