WEBフォントをnpmでインストールできるFontsourceをwebpackでビルドする先にエラーが出たので webpack.config.js をどうかけば良いのかのメモです。

yakuhanjp は「約物半角専用のWEBフォント」で任天堂のホームページで使われてるフォントです。

1
$ yarn add @fontsource/yakuhanjp
1
import "@fontsource/yakuhanjp";

webpackでビルドする時、何も設定してなければ @font-face のところでエラーになります。

1
2
3
4
5
6
7
8
9
10
ERROR in ./node_modules/@fontsource/yakuhanjp/index.css 2:0
Module parse failed: Unexpected character '@' (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| /* yakuhanjp-japanese-400-normal*/
> @font-face {
|   font-family: 'YakuHanJP';
|   font-style: normal;

webpack 5.43.0 compiled with 1 error in 3207 ms
ℹ ｢wdm｣: Failed to compile.

sass-loader をインストールして webpack.config.js を書き換えます。

webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
  module: {
    rules: [
      {
        test: /\.(scss|css)$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: "asset/resource",
      },
    ],
  },
}

これで、Fontsourceをwebpackでビルドできるようになったと思います。不備などありましたらコメントくださいm(_ _)m