使用esbuild + esbuild-sass-plugin构建React项目时SCSS模块导入报‘No matching export’错误

我看了你遇到的问题，之前用Webpack构建完全正常，换成esbuild就出现SCSS模块找不到default导出的报错，大概率是你的esbuild-sass-plugin配置出了冲突，咱们一步步来解决：

1. 核心问题：SCSS模块插件的type配置冲突 #

你现在处理.module.scss的sassPlugin里加了type: 'style'，这个配置会让esbuild把编译后的CSS直接以<style>标签的形式注入到页面里，而不是导出你需要的类名对象——这就导致你用import C from '@styles/mymodule.module.scss'的时候，这个模块根本没有default导出，自然报错。

修改这个插件的配置，把type: 'style'删掉就行：

config.plugins = [
    sassPlugin({
        filter: /\.module\.s?css$/,
        transform: postcssModules({})
        // 移除掉type: 'style'，让postcssModules负责导出类名对象
    }),
    sassPlugin({
        filter: /\.s?css$/,
        type: 'style' // 普通SCSS文件保留这个配置，正常注入样式
    })
];

2. 同步tsconfig路径到esbuild别名 #

esbuild不会自动读取tsconfig.json里的paths配置，所以你虽然在ts里配置了@styles/*对应src/styles/*，但esbuild可能没法正确解析这个别名（不过你当前的报错不是路径问题，但为了避免后续其他问题，最好补上）：

alias: {
    '@styles': resolveApp('./src/styles')
},

3. 可选：检查postcssModules的配置（如果问题还存在） #

如果修改上面的配置后还是报错，可以给postcssModules加一些明确的配置，确保它正确生成并导出类名：

transform: postcssModules({
    generateScopedName: '[name]__[local]___[hash:base64:5]', // 自定义类名生成规则
    exportDefault: true // 确保导出default对象，和你的ts声明对应
})

你的react-app-env.d.ts里的类型声明是正确的，不用改。之前Webpack没问题，是因为Webpack的css-loader处理模块时默认就会导出类名对象，而esbuild-sass-plugin的type: 'style'把这个逻辑覆盖了，调整后就能和Webpack的行为对齐了。

备注：内容来源于stack exchange，提问作者Timothy Muscat