# 樣式庫 [TOC] ## 介紹 主要介紹如何在項目中使用和規劃樣式文件。 默認使用 less 作為預處理語言，建議在使用前或者遇到疑問時學習一下[Less](http://lesscss.org/)的相關特性（如果想獲取基礎的 CSS 知識或查閱屬性，請參考 [MDN 文檔](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference)）。 項目中使用的通用樣式，都存放于 [src/design/](https://github.com/jeecgboot/jeecgboot-vue3/tree/master/src/design) 下面。 ~~~ . ├── ant # ant design 一些樣式覆蓋 ├── color.less # 顏色 ├── index.less # 入口 ├── public.less # 公共類 ├── theme.less # 主題相關 ├── config.less # 每個組件都會自動引入樣式 ├── transition # 動畫相關 └── var # 變量 ~~~ 全局注入 config.less 這個文件會被全局注入到所有文件，所以在頁面內可以直接使用變量而不需要手動引入 ~~~ <style lang="less" scoped> // 這里已經隱式注入了 config.less </style> ~~~ ## tailwindcss(2.5.0+) 項目中引用到了[tailwindcss](https://tailwindcss.com/docs),具體可以見文件使用說明。 語法如下: ~~~ <div class="relative w-full h-full px-4"></div> ~~~ ## windicss(2.5.0 已棄用) 項目中使用了[windicss](https://windicss.org/)，具體參見文件使用說明。 語法如下: ~~~ <div class="relative w-full h-full px-4"></div> ~~~ 注意事項 windcss 目前會造成本地開發內存溢出，所以后續可能會考慮切換到 TailwindCss，兩者基本相同。 所以盡量少用 Windicss 新增的特性，防止后續切換成本高。 ## 為什么使用 Less 主要是因為 Ant Design 默認使用 less 作為樣式語言，使用 Less 可以跟其保持一致。 ## 開啟 scoped 沒有加`scoped`屬性，默認會編譯成全局樣式，可能會造成全局污染 ~~~ <style></style> <style scoped></style> ~~~ 溫馨提醒 使用 scoped 后，父組件的樣式將不會滲透到子組件中。不過一個子組件的根節點會同時受其父組件的 scoped CSS 和子組件的 scoped CSS 的影響。這樣設計是為了讓父組件可以從布局的角度出發，調整其子組件根元素的樣式。 ## 深度選擇器 有時我們可能想明確地制定一個針對子組件的規則。 如果你希望`scoped`樣式中的一個選擇器能夠作用得“更深”，例如影響子組件，你可以使用`>>>`操作符。有些像 Sass 之類的預處理器無法正確解析`>>>`。這種情況下你可以使用`/deep/`或`::v-deep`操作符取而代之——兩者都是`>>>`的別名，同樣可以正常工作。 詳情可以查看 RFC[0023-scoped-styles-changes](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md)。 使用 scoped 后，父組件的樣式將不會滲透到子組件中，所以可以使用以下方式解決： ~~~ <style scoped> /* deep selectors */ ::v-deep(.foo) { } /* shorthand */ :deep(.foo) { } /* targeting slot content */ ::v-slotted(.foo) { } /* shorthand */ :slotted(.foo) { } /* one-off global rule */ ::v-global(.foo) { } /* shorthand */ :global(.foo) { } </style> ~~~ ## CSS Modules 針對樣式覆蓋問題，還有一種方案是使用 CSS Modules 模塊化方案。使用方式如下。 ~~~ <template> <span :class="$style.span1">hello</span> </template> <script> import { useCSSModule } from 'vue'; export default { setup(props, context) { const $style = useCSSModule(); const moduleAStyle = useCSSModule('moduleA'); return { $style, moduleAStyle, }; }, }; </script> <style lang="less" module> .span1 { color: green; font-size: 30px; } </style> <style lang="less" module="moduleA"> .span1 { color: green; font-size: 30px; } </style> ~~~ ## 重復引用問題 加上**reference**可以解決頁面內重復引用導致實際生成的 style 樣式表重復的問題。 這步已經全局引入了。所以**可以不寫**，直接使用變量 ~~~ <style lang="less" scoped> /* 該行代碼已全局引用。可以不用單獨引入 */ @import (reference) '../../design/config.less'; <style> ~~~