web-dev-qa-db-ja.com

HugoでSCSSをセットアップする方法

私はHugoをかなり使い始めており、不完全な例でかなり断片化されているように感じるので、ドキュメントに少し苦労しています。

新しいサイトhugo new site site-nameと新しいテーマhugo new theme theme-nameを作成しました。

SASS/SCSS のドキュメントページには、次の例があります。

{{ $sass := resources.Get "sass/main.scss" }}
{{ $style := $sass | resources.ToCSS }}

どこに行くべきか、パイプライン全体がどのように機能するのかわからない。また、テーマはstatic/cssフォルダーを使用して作成されていますが、これはassetsフォルダーの下のファイルを具体的に探しているようです。私がウェブで見つけたほとんどの例は、サポートがhugoに追加される前にgulpを使用してコンパイルするすべての古いセットアップです（私の理解から）

sasshugo
10
LostBalloon

自動的にSCSSをCSSにコンパイルするhugoの拡張バージョン（ https://github.com/gohugoio/hugo/releases/download/v0.53/hugo_extended_0.53_Windows-64bit.Zip など）を使用できます。君は。その後、すべての設定をカスタマイズできます。拡張バージョンを使用したくない、または使用しない場合は、Ruby SASSまたはGulpなどのようなウォッチャーを使用して古い学校に行く必要があります。

また参照してください： https://gohugo.io/news/0.43-relnotes/ 、メモを参照してください。 「Hugoは2つのバイナリバージョンでリリースされています。1つはSCSS/SASSサポートあり、もう1つはありません。現時点では、これはGitHubリリースページのバイナリでのみ利用できます。Brew、Snapビルドなどが提供されます。 SCSSを編集する場合にのみ拡張バージョンが必要です。CIサーバーの場合、またはSCSSを使用しない場合は、非拡張バージョンが必要になる可能性が高いです。」

私は個人的に拡張バージョンを使用しています。 Gitlab CIでも問題はありません。私は常にSCSSを作成/編集します。 hugoを実行すると、残りが実行されます。また、テーマがそれを適切にサポート/再生することを確認する必要もあります。使用するテーマ（SCSSをサポート）： https://github.com/luizdepra/hugo-coder/

3
Aaditya Maheshwari