Vue.js 是一款方便快捷的漸進式 JavaScript 框架，可以幫助開發者輕松構建交互性強、高效的前端應用程序。隨著Vue.js 3.0版本的正式發布，很多人對于如何導入 CSS 樣式到 Vue.js 3.0 版本的項目中存在疑問。在本篇文章中，我們將分享如何通過 Vue.js 的組件系統來導入 CSS 樣式。

Vue.js 3.0 版本中，可以通過以下兩種方式來導入 CSS 樣式：

// 方法一：使用<style>標簽
<template>
<div class="my-component">
<!-- 模板代碼 -->
</div>
</template>
<style>
.my-component {
background-color: #f2f2f2;
padding: 20px;
}
</style>

// 方法二：使用<link>標簽
<template>
<div class="my-component">
<!-- 模板代碼 -->
</div>
</template>
<link rel="stylesheet" href="./my-component.css" />

兩種方法都是可行的，只不過在實際使用時，需要根據具體情況來選擇合適的方式。使用<style>標簽比較適合在組件內部定義樣式，而使用<link>標簽則比較適合將樣式文件單獨維護，方便復用。

無論哪種方式，Vue.js 的組件系統都可以很好地結合 CSS 樣式，實現樣式與組件的分離，提高代碼的可維護性和可讀性。