為了簡化前端工程師的開發流程，Vite提供了別名(alias)的功能。借助別名功能，我們可以在導入模塊時使用自定義的名稱來代替長長的絕對路徑，節省了時間和心力。不過，某些時候我們也想要引入CSS文件，接下來，我將詳細介紹如何在Vite中使用別名引入CSS。
首先，在項目根目錄下的`vite.config.js`文件中，我們需要添加別名。例如，我們引入assets文件夾下的CSS文件，可以這樣寫：
```
import { defineConfig } from 'vite'
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
'assets': path.resolve(__dirname, 'src/assets')
}
}
})
```
在上面的配置中，我們添加了別名`assets`，其值指向了`src/assets`這個目錄。接著，在頁面中引入CSS時，我們可以使用該別名。例如，在組件中，我們可以這樣引入CSS文件：
```My Vite App ```
這里的`/assets/css/style.css`是我們上面定義的別名，將被Vite解析為實際路徑。
到這里，我們就成功地使用了別名引入CSS文件。總結一下，只需要在`vite.config.js`中定義別名，然后在組件中使用該別名引入CSS文件即可，很簡單吧！
Hello World
```
在這段代碼中，我們通過`@/assets/css/style.css`引入了CSS文件，并在組件中使用了`.container`這個樣式類。
最后，為了使CSS文件能夠被正確加載，我們需要在`index.html`文件中添加以下代碼：
```