【webpack】`SassError: Expected newline.` と4時間くらい戦った話【sass】

拡張子にも気を配りたいという話です。

何が起きたか

以下のようなエラーが発生し、コンパイルが通らず困りました。
いくら調べても解決策が見つからず、気がつけば何時間も経ってました。

ERROR in ./src/assets/style.sass (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/assets/style.sass)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected newline.
  ╷
1 │ h1 {
  │    ^

読み込ませようとしたスタイルシートは以下の通り。
ただ単に文字色を設定しているだけのもの。
拡張子がcssであれば全く問題なくコンパイルされます。

style.sass

h1 {
  color: #222;
}

原因

＿人人人人人人人人人人人人人人人＿
＞　拡張子が間違っていた！！！　＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^￣

シンプルに拡張子が誤っていました。
もしくは構文が誤ってた、と言うべきか。
今回、スタイルシートをstyle.sassとして作成してしまいましたが、本来はstyle.scssとするべきでした。

もしstyle.sassとするのであれば、構文が変わってきます。

style.sass

h1
  color: #222

経緯

create-react-app ではなく webpack を使用して react のプロジェクトを構築していました。
webpack 公式を参考にして各ローダーを設定してましたが、
sass、scssに関してはどちらもsass-loaderを通して読み込みます。
sass-loaderのsassにつられて拡張子までsassにしてしまった、というわけです。

余談

余談ですが、sassOptionsのindentedSyntaxにfalseを指定すればコンパイルが通るようになります。
全く無意味な情報ですが。

webpack.config.js

{
  test: /\.(c|sc|sa)ss$/,
  use: [
    "style-loader",
    "css-loader",
    {
      loader: "sass-loader",
      options: {
        sassOptions: {
          indentedSyntax: false,
        },
      },
    },
  ],
},