HUGOで作成したページでスタイルにcharsetが出力され、有効なAMPにならない

HUGOで出力されたページをAMPにしたい

AMPチェックをしました。

style amp-custom の @charset エラー

AMPにするためには、@charset があってはダメなようです。 AMPのドキュメントを確認しました。

許可の中に@charsetがありません。

誰が @charset を付けているか

public 配下のhtmlを確認すると、@charset "UTF-8"; がありました。

scssファイルには@charsetは記載していないので、 HUGOでCSSを作成するときに付けてくれているようです。

全角文字をAsciiに変更

ascii文字以外がある場合に付くようです。

scssファイルをチェックし、multi byte文字をasciiに修正します。

まだ、charset がついたまま。

charset を削除

オプションを調べましたがまだ charset が付く理由がわからなかったので、scss変換時にcharsetの出力を消すのは諦めます。
cssに変換後にcharsetを削除することにします。

PostCSS

PostCSS を使用してCSSファイルを変換することができるようです。

HUGOのドキュメントページ PostCSS の説明に従い、下記のコマンドを実行しJavaScriptモジュールをインストールします。

1

npm install -g postcss postcss-cli

@fullhuman/postcss-purgecss モジュールで期待通りのことができるようなので、こちらもインストールしておきます。

1

npm i @fullhuman/postcss-purgecss

HUGOのドキュメントページ PostCSS の説明に従い、postcss.config.js ファイルを作成し、PostCSS処理でインストールしたモジュールが実行されるように設定します。

1
2
3
4
5
6
7

module.exports = {
  plugins: {
    '@fullhuman/postcss-purgecss': {
      content: ['./**/*.html']
    }
  }
};

main.scss を css に変換して、各htmlページのstyleタグに出力されるように、baseof.html テンプレートに下記にように記述しました。

変更前

1
2
3
4

  <!-- css -->
  {{ $scss := resources.Get "scss/main.scss" }}
  {{ $style := $scss | resources.ToCSS | minify }}
  <style amp-custom>{{ $style.Content | safeCSS }}</style>

変更後

1
2
3
4
5

  <!-- css -->
  {{ $scss := resources.Get "scss/main.scss" }}
  {{ $options := (dict "outputStyle" "compressed" "enableSourceMap" true) }}
  {{ $style := $scss | resources.ToCSS $options | resources.PostCSS }}
  <style amp-custom>{{ $style.Content | safeCSS }}</style>

public 配下のhtmlを確認すると、@charset "UTF-8"; がなくなりました。

追記

CLOUDFLAREでビルドする際にエラーとなっていたので、PostCSSの処理を削除しました。
ビルド結果を確認すると@charset "UTF-8"; が出力されていませんでした。
ローカルPCの問題だったのかも。