Vue 3 使用 Master CSS

執行下列指令初始化 Master CSS 配置，因為我們的 Vue 專案是使用基於原生 ESM 的 Vite 作為建構與執行開發測試伺服器的工具，所以我們需要加上 **--esm** 的參數，執行後會在專案目錄建立出一個 master.css.mjs 檔案，檔案建立完成我會習慣將這個檔案移動到 src 目錄下供後續使用。您若使用 CommonJS 或 TypeScript，也可以選擇使用參數 --cjs 或 --ts。

npx mcss init --esm

4. 設置 CSS runtime engine

Vue.js 中推薦使用即時渲染（Runtime Rendering）模式，如同 Vue.js 在客戶端渲染（Client-Side Rendering）一樣，Master CSS 在即時渲染的模式下會觀察 DOM 類別的變化，自動產生相應的 CSS 規則，並將其規則注入到樣式表中。設置的方式很簡單，我們將 CSSProvider 導入並傳入剛才建制的初始化配置文件 master.css.mjs，並在 template 中將 CSSProvider 進行配置。

<script setup>
import { CSSProvider } from '@master/css.vue'
import config from './master.css.mjs'
</script>

<template>
	<CSSProvider :config="config">
	  ...
  </CSSProvider>
</template>

設定完看起來像這樣

<script setup>
import { CSSProvider } from '@master/css.vue'
import config from './master.css'
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>

<template>
  <CSSProvider :config="config">
    <header>
      <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

      <div class="wrapper">
        <HelloWorld msg="You did it!" />
      </div>
    </header>

    <main>
      <TheWelcome />
    </main>
  </CSSProvider>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>

5. 避免出現尚未套用樣式的內容

這邊是一個小細節的優化，為了避免執行時我們的 Master CSS 引擎尚未注入 CSS 規則，導致 FOUC (Flash of Unstyled Content)，也就是我們的網頁內容出現了，但是還沒套用樣式而醜醜的虛晃一下，所以我們可以在的標籤 style 加上 display: none ，就不會發生內容準備好了醜醜的出現，而是一個還看不到的情況，當 CSS 規則注入完成後由 Master CSS 幫我們在做顯示，而且這一切都是自動的唷。

我們修改專案目錄下的 index.html 檔案，修改後如下：

<!DOCTYPE html>
<html lang="en" style="display: none">
...

6. 啟動開發測試伺服器

執行下列指令來開啟 Vite 開發測試伺服器。

npm run dev

7. 開始使用 Master CSS

現在，我們就可以在標籤元素內的類別中開始撰寫 CSS，我們修改專案的下 src/App.vue 檔案。

<template>
    <CSSProvider :config="config">
        <h1 class="font:40 font:sans font:heavy italic m:50 text:center">Hello World</h1>
    </CSSProvider>
</template>

可以看到我們就成功的套用樣式囉！🎉