Webpack+React+TS项目使用别名导入CSS文件失败该如何解决？

核心问题出在webpack配置的resolve.extensions字段存在格式错误：

• 样式后缀css、scss漏加了.前缀，webpack解析模块时无法匹配到样式文件
• 保留了webpack 5已废弃的空字符串""后缀配置

修正方案 #

修改webpack.config.json的resolve.extensions配置如下：

resolve: {
    // 删掉废弃的空字符串，补全样式文件后缀的.前缀
    extensions: [".ts", ".tsx", ".js", ".json", ".css", ".scss"],
    alias: {
        BaseComponents: path.resolve(__dirname, "src", "BaseComponents"),
        Pages: path.resolve(__dirname, "src", "Pages"),
        Styles: path.resolve(__dirname, "src", "Styles"),
    },
},

修改完成后重启webpack开发服务即可生效。

为什么IDE没有报错？因为tsconfig的paths配置是正确的，IDE的路径补全、语法检查只依赖tsconfig配置，不参与webpack的模块解析逻辑，所以会出现IDE正常但打包报错的情况。

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