TypeScript环境中使用SCSS Module时出现.default属性的原因是什么？

• css-loader 4.0及以上版本默认开启了esModule: true配置项，会把CSS Module的导出转为ES模块格式，所有类名会被挂载到导出对象的default属性下，而非直接作为导出对象的属性。
• 你当前的webpack配置仅开启了modules=true，没有修改esModule的默认值，就出现了需要通过styles.default.button访问类名的情况，和typed-scss-modules默认生成的CommonJS风格类型定义不匹配，最终导致类型生成异常。

方案1：调整css-loader配置（更推荐，改造成本低） #

修改Storybook的webpack配置里的css-loader参数，关闭esModule即可匹配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',
        {
          loader: 'css-loader',
          options: {
            modules: {
              exportLocalsConvention: 'camelCase', // 可选配置，可自动把kebab-case类名转为驼峰格式，更适配TS调用
              mode: true
            },
            esModule: false // 关闭ES模块导出，使用CommonJS格式，类名直接挂载在导出对象根级
          }
        },
        'sass-loader'
      ],
      include: path.resolve(__dirname, '../'),
    });
    return config;
  },
};

修改后即可直接通过styles.button访问类名，和typed-scss-modules默认生成的类型定义完全匹配。

方案2：适配ES模块导出格式 #

如果需要保留esModule开启的状态，同步修改两处配置即可：

1. 把scss文件的导入语法改为默认导入：

import styles from './Button.module.scss';

2. 运行typed-scss-modules时添加--exportType default参数，生成默认导出的类型定义，示例命令：

npx typed-scss-modules src --exportType default

内容的提问来源于stack exchange，提问作者AdMer