Bulmaをwebpackで使うときにModule parse failed: Unexpected character '@' (1:0)というエラーが出た

はじめに

CSSフレームワークのBulmaをwebpackでバンドルしようとしたところ、Module parse failed: Unexpected character '@' (1:0)というエラーが出たので、その解決方法を記録しておこうと思います。

解決方法

今回使ったwebpackのバージョンは4.43.0です。Bulmaでwebpackを使う方法は公式のドキュメントに書いてあります。
bulma.io
基本的にはこの通りに進めれば大丈夫ですが、ドキュメント通りに設定すると、前述のエラーが出ます。
解決方法は、設定を一箇所追記するだけです。
ドキュメントではこうなっている箇所に、

          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
              // options...
            }
          }

implementation: require('node-sass')を追記します。

          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
              implementation: require('node-sass')
            }
          }

node-sassがインストールされていない場合は、$ npm i -D node-sassでインストールしてください。
この設定は、webpackのドキュメントを参考にしました。
webpack.js.org

おわりに

これまでずっと、jsのライブラリはscriptタグでCDNから読み込んで使っていたのですが、webpackを使えばnpmでサクッとインストールして使えるので、とても便利だと思いました。
webpack-dev-serverを使えば、気軽にWebサーバーが建てられるのも良いですね。
今後は、webpackを積極的に使っていこうと思います。