Hugo dart-sass-embedded - 独学者Fossa

使用環境

Name	Version
Hugo	v0.92.1-extended
dart-sass-embedded	1.0.0-beta.16
Vanilla Framework	3.0.1
Ubuntu	20.04.3 LTS Desktop

Vanilla Framework v3

Vanilla Framework v3で、Hugoを使うと下記のようにエラーが出ました。

Start building sites … 
hugo v0.92.1-85E2E862+extended linux/amd64 BuildDate=2022-01-27T11:44:41Z VendorInfo=gohugoio
Error: Error building site: TOCSS: failed to transform "scss/vanilla3.scss" (text/x-scss): SCSS processing failed: file "/home/<省略>/themes/vanilla3/node_modules/vanilla-framework/scss/_global_functions.scss", line 96, col 19: Invalid CSS after "...   $value: math": expected expression (e.g. 1px, bold), was ".div($value, $numbe" 
Total in 15 ms

vanilla-framework/scssディレクトリの中の_global_functions.scssの96行目。

      $value: math.div($value, $number);

除算する時に記述していた/の代わりに、math.div()を使うようにしてねと変更されたのが、Dart Sassの1.33.0以降。

最新のdart-sass-embeddedを使うと、math.div()に対応しているらしいという書き込みを発見。

transpilerにdartsassを指定すると、Hugoでdart-sass-embeddedが使えるみたいです。

dart-sass-embeddedを使うには、ダウンロードして、設置したディレクトリを、$PATHに追加すればいいらしいです。

早速やってみましょう。

dart-sass-embeddedって何？

Hugoのコミュニティの中で、bep氏の説明を見つけたので、引用します。

Yes, it wraps Dart Sass in a protocol that Hugo understands. So, it’s a standalone binary, but it’s not the same as the Dart Sass CLI.

Google翻訳にかけると、下記の通り。

はい、それはHugoが理解しているプロトコルでDart Sassをラップします。そのため、スタンドアロンのバイナリですが、Dart Sass CLIと同じではありません。

最新のdart-sass-embedded 1.0.0-beta.16だと、Upgrade to Sass 1.48.0と書いてあるので、比較的、新しいSassが使いたい人にメリットがありそうな気がします。*1

dart-sass-embeddedをダウンロード

github.com

上記のサイトから、dart-sass-embeddedをダウンロードしましょう。

私は、Ubuntu 20.04.3 LTSなので、sass_embedded-1.0.0-beta.16-linux-x64.tar.gzをダウンロードしました。

$PATHに追加

適当なところに展開して、$PATHに追加しましょう。*2

"transpiler" "dartsass" を追加

{{- $options := (dict "transpiler" "dartsass" "targetPath" "assets/css/style.css" "outputStyle" "expanded" "enableSourceMap" true "includePaths" (slice "themes/vanilla3/node_modules")) -}}
{{- $style := resources.Get "scss/vanilla3.scss" | resources.ToCSS $options -}}
<link rel="stylesheet" href="{{ $style.RelPermalink }}">

端末（ターミナル）で、hugo

Start building sites … 
hugo v0.92.1-85E2E862+extended linux/amd64 BuildDate=2022-01-27T11:44:41Z VendorInfo=gohugoio

                   | JA  
-------------------+-----
  Pages            |  4  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     |  0  
  Processed images |  0  
  Aliases          |  0  
  Sitemaps         |  1  
  Cleaned          |  0  

Total in 16 ms

エラーは、なくなりました。