將多個 CSS 檔合併成單一 CSS 檔
實務上會想將每個 Template 或 Partial 有自己的 CSS 檔,在開發階段亦保持獨立,直到編譯階段再將所有 CSS 檔合併成單一 CSS 檔。
實務上會想將每個 Template 或 Partial 有自己的 CSS 檔,在開發階段亦保持獨立,直到編譯階段再將所有 CSS 檔合併成單一 CSS 檔。
WebStorm 已經提供 Vue Plugin 完整支援 Vue,唯一只有 .vue 格式縮排部分,Webstorm 與 Vue 的看法迥異,在 Reformat Code 之後,縮排會完全跑掉,需要稍微調整。
Hugo 內建支援 LibSass,可直接使用。
頁尾 部分常會在各網頁重複出現,相對應 HTML 的 <footer> 標籤,可將這部分內容抽成 footer Partial 方便維護,並搭配 _footer.scss。
頁首 部分常會在各網頁重複出現,相對應 HTML 的 <header> 標籤,可將這部分內容抽成 header Partial 方便維護,並搭配 _header.scss。
Hugo 預設以 baseof.html 提供所有頁面基礎 Template,並搭配 _baseof.scss。
HTML 的 <head> 會載入 CSS,也是各 Template 都會重複使用之處,可將其抽成 Partial 方便維護。
Hugo 內建支援 LibSass,其實也相當夠用,但 LibSass 已經停止支援,若想用最新的 Sass 語法,則必須另外安裝 Dart Sass,且 Hugo 已經原生支援 Dart Sass。
使用 Hugo 時,有些檔案並不用進 Git,我們可將這些檔案寫在 .gitignore 內。
除了能在 Hugo 引用外部 CSS 檔案外,Hugo 也兼具 Webpack 角色,可順便將 CSS 加以壓縮。