css - 为什么带有 typescript 的 scss 模块具有 .default 属性

Question

在 typescript 环境中使用 scss 模块时，我的模块存储在一个名为 default 的属性中

按钮样式.scss

.button {
  background-color: black;
}

索引.tsx

import * as React from 'react';
import * as styles from './Button.module.scss';

console.log(styles);

export const Button = () => (
  <button className={styles.default.button}>Hello</button>
);

Console.log 输出

Module {__esModule: true, default: {button: "_2t432kRILm79F3WhLGdN6N"}, Symbol(Symbol.toStringTag): "Module"}

这是为什么 ？因此，我无法使用 typed-scss-modules 正确生成类型。

编辑：

故事书配置是

const path = require('path');

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader?modules=true', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });
    return config;
  },
};

标签： cssreactjstypescriptsassstorybook