Skip to main content

Hugo パイプは、PostCSS を使用して CSS ファイルを処理できます。

セットアップ

利用可能な PostCSS プラグイン  のいずれかを使用して CSS を変換するには、以下の手順に従ってください。

ステップ 1
Node.js  をインストールします。
ステップ 2
必要な Node.js パッケージをプロジェクトのルートにインストールします。 たとえば、CSS ルールにベンダー プレフィックスを追加するには、以下のようにします。
npm install postcss postcss-cli autoprefixer
ステップ 3
プロジェクトのルートに PostCSS 設定ファイルを作成します。 このファイルの名前は、postcss.config.js またはその他の [サポートされているファイル名] のいずれかにする必要があります。たとえば、以下のようにします。
postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
};

と issue <a href=“https://github.com/gohugoio/hugo/issues/7333"target="_blank"  rel=“noopener”>#7333 

を参照してください。

ステップ 4
CSS ファイルを assets ディレクトリに置きます。
ステップ 5
CSS ファイルをリソースとしてキャプチャし、resources.PostCSS (別名 postCSS) を通して以下のようにパイプします。
layouts/partials/css.html
{{ with resources.Get "css/main.css" | postCSS }}
  <link rel="stylesheet" href="{{ .RelPermalink }}">
{{ end }}

assets ディレクトリ内の Sass ファイルから始める場合は、以下のようにします。

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

オプション

resources.PostCSS メソッドは、オプションのオプションのマップを受け取ります。

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 です。 Hugo 0.99.0 以前では、inlineImports が有効で、インポートの解決に失敗すると、警告としてログに記録していました。現在はビルドに失敗するようになりました。 CSS に通常の CSS インポートがあり、それを保持したい場合は、URL やメディアクエリでインポートを使用するか (Hugo はそれらを解決しようとしません)、skipInlineImportsNotFound を true に設定します。
layouts/partials/css.html
{{ $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 文字列化子 (stringifier)
syntax [string]
カスタム PostCSS 構文
layouts/partials/css.html
{{ $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 コンテキストで利用可能であり、以下のような構成をとることができます。

postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
    ...process.env.HUGO_ENVIRONMENT === 'production'
      ? [purgecss]
      : []
  ]
}