React(Next.js) + vanilla-extractにstorybookを導入する

環境

名前	バージョン
next	13.0.6
react	18.2.0
@vanilla-extract/css	1.9.2
@storybook/react	6.5.14

導入方法

npx create-next-appしたプロジェクト配下でnpx storybook initしている状態にする。
以下のパッケージを追加する

npm i --save-dev @vanilla-extract/css @vanilla-extract/webpack-plugin mini-css-extract-plugin@1.6.2

.storybook/vanilla-extract.jsを作成して、内容を以下にする

const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  webpackFinal(baseConfig, options) {
    const { module = {}, plugins = {} } = baseConfig;

    const cssRule = module.rules.find((rule) => rule?.test?.test('test.css'));
    cssRule.test = /.*(?<!\.vanilla)\.css$/;

    return {
      ...baseConfig,
      plugins: [
        ...plugins,
        new VanillaExtractPlugin(),
        new MiniCssExtractPlugin(),
      ],
      module: {
        ...module,
        rules: [
          ...module.rules,
          {
            test: /\.vanilla\.css$/i, // Targets only CSS files generated by vanilla-extract
            use: [
              MiniCssExtractPlugin.loader,
              {
                loader: require.resolve('css-loader'),
                options: {
                  url: false, // Required as image imports should be handled via JS/TS import statements
                },
              },
            ],
          },
        ],
      },
    };
  },
};

.storybook/main.jsを以下に編集する

const path = require('path');

module.exports = {
  stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    path.resolve('./.storybook/vanilla-extract.js'),
    '@storybook/addon-links',
    '@storybook/addon-essentials',
  ],
  framework: '@storybook/react',
  core: {
    builder: '@storybook/builder-webpack5',
  },
};

以上で、導入完了。