2020-11-13

【Gatsby.js】アプデしたらなぜかsassでコケる時【gatsby-plugin-sass】

謎のオプション追加で解決できる。

gatsby-plugin-sassをアプデするとビルドできない

gatsby-plugin-sassを2.3.22より大きいものへアップデートするとビルド時に次のエラーを吐くようになり結暫くはアプデしない状態を維持していた。

error Generating development JavaScript bundle failed


$content-heading-weight: 500
^
      Invalid CSS after "...-heading-weight": expected 1 selector or at-rule, was ": 500"
      in C:\Users\Domin\Documents\node_projects\Blogs\Blog-Ultra-Noob\src\components\all.sass (line 3, column 1)

エラーとなっているのは単なるscssの変数定義の箇所。文法的には全く問題ないはず。

何度か試したが別のscssではない別の文法を使うように指示されているようで、おそらくscssファイルとして認識されていないのではないかと考えていた。

謎の解決法

定期的にgatsby.jsのissuesを眺めているとなんの解説もされないまま単発で解決策が報告される。

意訳：「次のオプションを追加してみて」

Try adding the following option to your gatsby-config.js

{ resolve: 'gatsby-plugin-sass', options: { indentedSyntax: true }, },

SASS file is not being read as a SASS file but as a CSS file and is causing deploy to fail · Issue #28007 · gatsbyjs/gatsbyより引用

本当にこれだけのコメント。

謎のオプション

このオプション

{
    resolve: 'gatsby-plugin-sass',
    options: {
        indentedSyntax: true
    },
},

これをつけて読み込むことにより本当に治る。

しかしこのオプション、公式に解説されておらず謎。

node-sassのオプションっぽい気もするのだがこちらも調べても不明。

内部で使っている別パッケージのオプションだと思われるが本当に不明。

余談：質問者の感謝と困惑

この問題を報告した人が感謝と共に困惑のコメントを残している。

〔中略〕

I just couldn't find where the available "options" were for the 'gatsby-plugin-sass' plug-in. Also, is there any indication on why, after using this website for 2 months, that this property was all of a sudden required?

That fixed my problem so I deleted the repo, thank you so much!

意訳：このオプションがどこにあるのか、なぜ必要なのかという情報はみつかりませんでした。なぜ突然このようなオプションが必要になったのでしょうか？

私も全く同意見である。

いつもは原因を探るのだが....

よくわからんがまぁ動いているからヨシ！とする。