在 Vue 3 中，您可以通過幾種方式引入 CSS，以下是一些常見的方法：
1、全局引入：
將 CSS 文件直接添加到項目的公共樣式表中，這樣，所有的 Vue 組件都可以訪問這些樣式。
```javascript
import '@/assets/css/global.css';
```
2、局部引入：
在特定的 Vue 組件中引入 CSS，這通常用于組件內(nèi)部的樣式定制。
```javascript
import { createComponent } from 'vue';
import componentCSS from '@/assets/css/component.css';
const Component = createComponent({
name: 'Component',
template: `
<div class="component">
<!-- 組件內(nèi)容 -->
</div>
`,
style: componentCSS, // 將樣式直接添加到組件中
});
```
3、使用 CSS Modules：
Vue 3 支持 CSS Modules，這是一種將 CSS 樣式局部化到每個組件的方式，通過 CSS Modules，您可以避免全局樣式污染，并提升組件的可重用性。
```javascript
import { createComponent } from 'vue';
import componentCSS from '@/assets/css/component.module.css';
const Component = createComponent({
name: 'Component',
template: `
<div class="component">
<!-- 組件內(nèi)容 -->
</div>
`,
style: componentCSS, // 使用 CSS Modules 樣式
});
```
4、使用樣式表：
直接在 Vue 組件的模板中使用樣式表（<style>）來定義樣式，這種方式適用于簡單的樣式需求，或者需要覆蓋其他引入的樣式。
```javascript
import { createComponent } from 'vue';
const Component = createComponent({
name: 'Component',
template: `
<div class="component">
<!-- 組件內(nèi)容 -->
</div>
<style>
.component { /* 樣式定義 */ }
</style>
`,
});
```
選擇哪種方式取決于您的具體需求和項目結(jié)構(gòu)，全局引入適用于公共樣式，而局部引入和 CSS Modules 適用于組件內(nèi)部的樣式定制，在開發(fā)過程中，根據(jù)實際需要靈活使用這些方式，可以幫助您更有效地管理和組織 Vue 項目的樣式。
