webpack中sass-loader无法识别tsconfig配置的path路径别名该如何解决

原因 #

TsconfigPathsPlugin仅对JavaScript/TypeScript的模块路径解析生效，不会同步到sass-loader的样式文件导入逻辑，因此sass文件里的tsconfig别名无法被识别。

可行解决方案 #

方案1：同步配置webpack resolve.alias（兼容性最好） #

在webpack配置的resolve.alias字段添加和tsconfig paths完全一致的别名，sass-loader v8及以上版本默认会复用webpack的模块解析规则，无需额外加前缀：

// webpack.config.js
const path = require('path');

module.exports = {
  resolve: {
    plugins: [new TsconfigPathsPlugin()],
    // 新增别名配置，和tsconfig paths保持一致
    alias: {
      'Components': path.resolve(__dirname, 'src/components')
    }
  }
}

如果使用旧版本sass-loader，只需要在导入路径前加~前缀即可正常识别：

@use '~Components/UI/Grid';

方案2：配置sass-loader的loadPaths（无需重复维护别名） #

如果不想在webpack里重复维护和tsconfig一致的别名，可以直接给sass-loader添加解析路径：

// webpack.config.js
const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              sassOptions: {
                // 将src目录加入sass的解析路径列表
                loadPaths: [path.resolve(__dirname, 'src')]
              }
            }
          }
        ]
      }
    ]
  }
}

配置后按实际目录结构写导入路径即可：

@use 'components/UI/Grid';

方案3：自动同步tsconfig别名到webpack #

如果别名较多不想手动同步，可以通过tsconfig-paths包读取tsconfig的paths配置自动生成webpack alias，避免两份配置不一致出错。

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