ASSET MANAGEMENT

PostCSS

設定

請依照下列步驟，使用任意可用的 PostCSS 插件 轉換 CSS。

步驟 1
安裝 Node.js。
步驟 2
在專案根目錄中安裝所需的 Node.js 套件。例如，要為 CSS 規則新增廠商前綴：
npm i -D postcss postcss-cli autoprefixer
步驟 3
在專案根目錄中建立 PostCSS 配置檔案，檔名必須為 postcss.config.js 或其他 [支援的檔名]。例如：
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
};
步驟 4
將 CSS 檔案放置於 assets 目錄中。
步驟 5
將 CSS 檔案作為資源讀取，並將其傳遞至 css.PostCSS（或其別名 postCSS）處理：
{{ with resources.Get "css/main.css" | postCSS }}
  <link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}

若從 assets 目錄中的 Sass 檔案開始：

{{ with resources.Get "sass/main.scss" | toCSS | postCSS }}
  <link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}

選項

css.PostCSS 方法接受一個可選的選項映射（map）。

config
(string) 包含 PostCSS 配置檔案的目錄。預設為專案根目錄。
noMap
(bool) 預設為 false。若為 true，則會禁用內聯來源地圖。
inlineImports
(bool) 預設為 false。啟用內聯 @import 語句。會遞迴導入，但每個檔案只會被導入一次。URL 匯入（例如 @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');）及帶有媒體查詢的匯入會被忽略。此導入程序不會遵循 CSS 規範，因此您可以在檔案中的任何地方使用 @import。Hugo 會查找相對於模組掛載的匯入，並尊重主題覆蓋。
skipInlineImportsNotFound
(bool) 預設為 false。若您希望保留常規 CSS 匯入，您可以使用 URL 或媒體查詢的匯入（Hugo 不會嘗試解析這些），或將 skipInlineImportsNotFound 設為 true。
{{ $opts := dict "config" "config-directory" "noMap" true }}
{{ with resources.Get "css/main.css" | postCSS $opts }}
  <link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}

無配置檔案

若不使用 PostCSS 配置檔案，您可以使用選項映射指定最小配置。

use
(string) 以空格分隔的 PostCSS 插件列表。
parser
(string) 自定義的 PostCSS 解析器。
stringifier
(string) 自定義的 PostCSS 字串化器。
syntax
(string) 自定義的 postcss 語法。
{{ $opts := dict "use" "autoprefixer postcss-color-alpha" }}
{{ with resources.Get "css/main.css" | postCSS $opts }}
  <link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}

檢查 Hugo 環境

目前的 Hugo 環境名稱（由 --environment 或配置檔或 OS 環境設定）可在 Node 環境中使用，讓您能夠實現如下構造：

module.exports = {
  plugins: [
    require('autoprefixer'),
    ...process.env.HUGO_ENVIRONMENT === 'production'
      ? [purgecss]
      : []
  ]
}
Search tools Methods