Zenn
Closed15

Storybook v7 は `next/font` をどのように扱うのか

Next.js
Storybook
ピン留めされたアイテム
snakasnaka

ざっくりとまとめ

@storybook/nextjs では以下のことが行われていた。

  1. Babel によって、ソースコードの import 部分の書き換えが行われる
    import { xxx } from 'next/font/google'
    上記が以下のように
    import { xxx } from 'storybook-nextjs-font-loader?{ ... }!next/font/google'
  2. Webpack によって、上記の import の箇所で storybookNextjsFontLoader() が呼び出される
  • getFontFaceDeclarations() で CSS の @font-face の定義が生成される
snakasnaka

名前から推測するに storybook-nextjs-font-loader を webpack の設定として利用している箇所があるはず

snakasnaka

SWC は使っていないので、webpack config に以下の設定が追加されるイメージ?

{
  resolveLoader: {
    alias: {
      'storybook-nextjs-font-loader': '@storybook/nextjs/font/webpack/loader/storybook-nextjs-font-loader'
    }
  }
}
snakasnaka

こっちのページのほうがわかりやすい

https://webpack.js.org/concepts/loaders/

Loader は module.rules によって、どのファイルに対してどの Loader を適用するかを指定されている。

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' },
    ],
  },
};

あるいは Inline で import で loader-name! のように直接指定する方法もある

import Styles from 'style-loader!css-loader?modules!./styles.css';
snakasnaka

となると、 storybook-nextjs-font-loader を Loader として指定する module.rules 設定がありそう

snakasnaka

Storybook の addon の仕組みについて調べる

https://storybook.js.org/docs/addons/writing-presets

snakasnaka

preset addon は preset.ts (ファイル名は任意で export する関数名が重要なはず ) で export した webpackFinal 関数が呼び出されるようになってるっぽい

To customize the Webpack configuration in Storybook to add support for additional file types, apply specific loaders, configure plugins, or make any other necessary modifications, you can use the webpackFinal API. Once invoked, it will extend the default Webpack configuration with the provided configuration.

このスクラップは4ヶ月前にクローズされました