前端UI設計規範引入

使用背景:
UI設計規範通常包含字體、字級、主配色與客製組件的樣式(style)。

在專案中，也經常會引入已經完善的樣式庫來妥善管理全站的樣式，像是tailwindCSS。同時，也會在使用前端框架的情況下，導入其他UI庫，像是vue3的Element plus，且這些UI組件通常也有自己需要倚賴的樣式庫。

而這些需要倚賴的樣式庫，如果在專案有要求設計規範時，可以很方便產出符合UI設計規範的專案樣式庫。

以下是預設使用sass的專案中，配置tailwindCSS和Element plus來增加或覆寫預設的樣式。

對tailwindCSS增加定義

依照官方文檔建立tailwind.config.js中，加入需要客製定義的元素，tailwind就能在編譯後建立出相依這些元素的樣式。

module.exports     mode: 'jit', //只編譯有使用到的樣式    content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],    theme: {        //...(略)        colors:{            //...(略)             pressing: '#DBE9D8', //定義顏色與對應的色碼            pressing2: '#E0F2DE',            mainGreen: '#3bb071',            mainGreenDarker: '#b8d8c9',            secondColor: '#b8d8c9',        }    }}

在class中，就能使用如text-mainGreen的樣式改變字體顏色，也能使用from-pressing to-pressing2來讓背景的漸層樣式去對應到上段新定義的顏色。

<template>    <div class="... bg-gradient-to-r from-pressing to-pressing2 text-mainGreen">        <Login />    </div></template>

對Element plus覆寫定義

這部分可以分為兩個情況做處理

在UI庫產生樣式庫前，先修改定義的元素

比如要修改顏色中定義為primary的色碼。依照官方文檔去覆寫定義，在專案使用sass的情況下，可以獨立建立一支scss檔案。

//elementPlusInit.scss@forward 'element-plus/theme-chalk/src/common/var.scss' with (    $colors: (        'primary': (            'base': #3bb071        )    ));

而必須確保在專案在掛載Element plus樣式庫前，先執行這段scss檔的內容，在我目前使用Vite的情況下，是在vite.config.js中，設定如下。在理解上，是把這支scss檔指令/資料加到vite打包css的預處理流程中，而改變element-plus產生的樣式庫的結果。

export default ({ mode }) => defineConfig({    //...(略)     css: {        preprocessorOptions: {            scss: {                additionalData: `@use "@/assets/styles/elementPlusInit.scss" as *;`            }        }    }})

在vite ^2.3.7上打包後 這支預載scss定義的樣式會被重複在每一個分割的組件css中 所以目前先採取只先把定義修改的指令在這支檔案，否則會有大量的重複樣式產生在開發和打包結果中。

在UI庫產生樣式庫後，覆寫已經定義好的樣式

這部分的實作，就是打開dev tool找到畫面上element-plus給組件配的樣式名稱，再做一次覆寫。而這邊的覆寫，還嘗試加入深/淺模式變化上，強制(!important)讓組件的樣式換上自定義的顏色(但可能還有更漂亮的作法?)。

.el-table {    background: var(--bg) !important;    color: var(--font-color) !important;      }.el-table__expanded-cell[class*='cell'] {    padding 20px;}.el-table td,.el-table th {    padding;    font-weight: 400;}.el-breadcrumb__inner a {    color: var(--font-color) !important;}