Use `resolve.alias` to support `.scss` import resolution

[matthew-dean]

This would be great if this actually worked as a replacement for Vite resolve.alias settings, but it doesn't. I'm not sure if this is a Vite problem or just an issue with this plugin problem.

For example, this was the previous setting:

resolve: {
    alias: [
      {
        find: /^@\//,
        replacement: path.resolve(__dirname, 'src') + '/'
      }
    ]
  },

This resolved every file resource. However, with tsConfigPaths(), this fails with .scss and other files. This and this are marked as upstream bugs, but wouldn't a solution just be to return an array that can replace the resolve.alias array directly? Instead of a plugin?

[aleclarson]

resolve.alias affects all modules, while this plugin supports multiple tsconfig files in the same build and adheres to the include and exclude options therein. Therefore, it's not feasible to use resolve.alias

[matthew-dean]

@aleclarson Okay, is there a way then to get this working in Vite?

[aleclarson]

Possibly. I don't have a need for it, so I haven't looked. I'm leaning toward waiting for Vite 5 to add support for CSS imports in the resolveId plugin hook.

[o-alexandrov]

As @aleclarson suggested https://github.com/aleclarson/vite-tsconfig-paths/issues/115#issuecomment-1579180489, here is a workaround for your needs, if you need to use alias:

export const getResolveConfig = (tsconfig: TsConfigJson) => {
  const resolveConfig = {
    alias: []
  }

  const paths = tsconfig.compilerOptions?.paths;
  if (!paths) return resolveConfig;

  const tsconfigAliasPaths = Object.keys(paths).map((key): Alias => {
    const value = paths[key][0];
    return {
      find: key.replace('/*', ''),
      replacement: resolve(value.replace('/*', '')),
    };
  });
  resolveConfig.alias = [...resolveConfig.alias, ...tsconfigAliasPaths];

  return resolveConfig;
};

[emosheeep]

https://github.com/aleclarson/vite-tsconfig-paths/issues/30#issuecomment-1829923317