隨著前端技術的不斷發展，組件庫的開發越來越受到前端開發者的重視。在開發組件庫時，CSS 是一個不可避免的需求。在 Vue 組件庫的開發中，CSS 主要有三種方式：全局樣式，局部樣式和混合樣式。

// 全局樣式
// 在全局樣式中，可以使用 :root 來定義全局變量，然后在組件中使用這些變量。
:root {
--primary-color: #007aff;
}
// 局部樣式
// 在單個組件中，可以使用 scoped 屬性來使得該組件的樣式僅在其內部生效。

局部樣式有時候并不能滿足需求，我們可以使用混合樣式的方式。混合樣式就是通過在全局樣式中定義一些可復用的 CSS 類，然后在組件中使用這些類來快速完成樣式的設置。

// 全局樣式
// 在全局樣式中，我們定義了兩個 CSS 類
// - display-flex: 表示設為 flex 布局
// - justify-center: 表示在主軸上居中對齊
.display-flex {
display: flex;
}
.justify-center {
justify-content: center;
}
// 組件

通過混合樣式的方式，我們可以有效地進行樣式的復用和組合，進一步提高組件庫的開發效率。