如何在TypeScript中配置导入映射，实现引入scss文件时自动加载对应json文件

可行方案整理 #

方案1：配置tsconfig的paths + baseUrl（优先推荐） #

你之前paths未生效大概率是缺少baseUrl配置，或者匹配规则范围不正确，按照以下配置调整即可：
在tsconfig.json的compilerOptions中添加如下配置：

{
  "compilerOptions": {
    "baseUrl": ".", // 必须配置，路径以项目根目录为基准
    "paths": {
      "*.scss": ["*.scss.json"] // 匹配所有.scss后缀的导入，重定向到同名.scss.json文件
    }
  }
}

如果是TS 4.7及以上版本，也可以配合moduleSuffixes参数实现，效果一致：

{
  "compilerOptions": {
    "moduleSuffixes": [".json", "", ".ts", ".tsx"]
  }
}

方案2：Node运行时重定向导入（针对编译后JS运行场景） #

如果你是在Node.js环境运行编译后的代码，可以直接在入口文件最顶部添加导入劫持逻辑：

CommonJS 场景

// 入口文件首行添加
require.extensions['.scss'] = function (module, filename) {
  module.exports = require(`${filename}.json`);
}

ES Module 场景

可以通过Node的--experimental-loader参数指定自定义加载器脚本，在加载器中统一将.scss后缀的导入重定向到.scss.json文件。

方案3：预编译替换导入语句 #

如果前两种方案不适用，你可以写一个简单的全局替换脚本，在TS编译执行前，遍历所有.ts/.tsx文件，将所有.scss后缀的导入语句批量替换为.scss.json后缀，同时将已生成的类型声明文件重命名为*.scss.json.d.ts即可正常匹配类型。

paths未生效的常见排查点 #

• 未配置baseUrl参数，paths的所有匹配路径默认相对于baseUrl解析
• 通配符规则范围错误，例如写"./*.scss"仅能匹配根目录下的scss文件，无法匹配子目录文件
• TS版本过低，旧版本TS对相对路径的通配符匹配存在兼容性问题

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