resources.PostCSS

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

設置

按照以下步驟使用任何可用的 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/css 目錄中。
步驟 5
使用 PostCSS 處理資源：
{{ with resources.Get "css/main.css" | postCSS }}
  <link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}

選項

resources.PostCSS 方法接受一個可選的選項映射。

config
（string）包含 PostCSS 設定檔案的目錄。預設為專案目錄的根目錄。
noMap
（bool）預設為 false。若為 true，禁用內嵌 sourcemaps。
inlineImports
（bool）預設為 false。啟用內嵌 @import 語句。此功能會遞迴處理，但僅匯入一次檔案。不會處理 URL 匯入（例如：@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');）及帶有媒體查詢的匯入。請注意，此匯入邏輯不遵循 CSS 規範，因此可以在檔案的任何位置使用 @import。Hugo 會根據模組掛載解析匯入，並尊重主題覆蓋。
skipInlineImportsNotFound
（bool）預設為 false。在 Hugo 0.99.0 之前，若啟用了 inlineImports 且無法解析匯入，會記錄為警告；現在則會使建置失敗。若您的 CSS 中包含需要保留的常規匯入，可以使用 URL 或媒體查詢的匯入，或將 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 環境名稱（由 --environment 或設定檔案或作業系統環境設定）可用於 Node 上下文，允許類似以下的設置：

const autoprefixer = require('autoprefixer');
const purgecss = require('@fullhuman/postcss-purgecss');
module.exports = {
  plugins: [
    autoprefixer,
    process.env.HUGO_ENVIRONMENT !== 'development' ? purgecss : null
  ]
}
resources.PostProcess resources.Minify