Storybook + React で CSS Module のスタイルが適用されない

実現したいこと

Storybook で CSS Module のスタイルが適用されません。
import * as styles from でスタイルを読み込もうと undefined になります。
import styles from で読み込んだ場合は問題ありません。
import * as でも読み込まれるようにしたい場合はどのように設定すればいいでしょうか？

前提

• Gatsby v5
• Storybook v7

該当のソースコード

ts:button.tsx

1import * as styles from '@styles/_button.module.scss' // import styles に変えれば適用される 2 3const Button = () => (4 <div className={styles.button}> // import * as だと styles.button は undefined になり適用されない5 button 6 </div>7)8 9export default Button

scss:_button.module.scss

1.button {2 display: inline-block;3 padding: 16px 32px;4 font-weight: 500;5 color: #fff;6 background-color: #3ea8ff;7 border-radius: 10px;8 box-shadow: 0px 0px 15px -5px #0f83fd;9}

Storybook の設定ファイル

ts:.storybook/main.ts

1import type { StorybookConfig } from '@storybook/react-webpack5'2const path = require('path')3 4const config: StorybookConfig = {5 stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],6 addons: [7 '@storybook/addon-links',8 '@storybook/addon-essentials',9 '@storybook/addon-onboarding',10 '@storybook/addon-interactions'11 ],12 13 framework: {14 name: '@storybook/react-webpack5',15 options: {}16 },17 docs: {18 autodocs: 'tag'19 },20 webpackFinal: async (config) => {21 config.module?.rules?.push({22 test: /\.scss$/,23 include: path.resolve(__dirname, '../'),24 use: [25 'style-loader',26 {27 loader: 'css-loader',28 options: {29 modules: {30 auto: true,31 localIdentName: '[name]__[local]--[hash:base64:5]',32 },33 url: false,34 },35 },36 'sass-loader'37 ],38 })39 return config 40 },41}42export default config