Webpack sass-loader未使用tsconfig路径。

Question

Sass-loader似乎不使用在typescript配置中声明的路径（别名）。因此，简单的@use或@import会产生未找到错误。

Webpack

resolve: {
    plugins: [new TsconfigPathsPlugin()],

tsconfig

"paths": {
    "Components/*": ["src/components/*"],

结果

SassError: SassError: Can't find stylesheet to import.
1 │ @use 'Components/UI/Grid';

在sass-loader中是否可以导入tsconfig路径?

- Jerome

Answer 1

这主要是因为在TsconfigPathsPlugin中，扩展选项不包括'.scss'，而您正在导入没有扩展名的文件。

解决方案1：

使用完整的文件名，例如：

@use 'Components/UI/Grid.scss';

解决方案2：

将扩展名.scss添加到TsconfigPathsWebpackPlugin中。

plugins: [
  new TsconfigPathsWebpackPlugin({
    extensions: ['.js', '.ts', '.vue', '.json', '.scss'],
  }),
],

尝试在node_modules/tsconfig-paths/lib/try-path.js中添加console.log，getPathsToTry函数可以真正帮助您进行调试。

function getPathsToTry(extensions, absolutePathMappings, requestedModule) {
    if (!absolutePathMappings || !requestedModule || requestedModule[0] === ".") {
        return undefined;
    }
    var pathsToTry = [];
    for (var _i = 0, absolutePathMappings_1 = absolutePathMappings; _i < absolutePathMappings_1.length; _i++) {
        var entry = absolutePathMappings_1[_i];
        var starMatch = entry.pattern === requestedModule
            ? ""
            : matchStar(entry.pattern, requestedModule);
        if (starMatch !== undefined) {
            var _loop_1 = function (physicalPathPattern) {
                var physicalPath = physicalPathPattern.replace("*", starMatch);
                pathsToTry.push({ type: "file", path: physicalPath });
                pathsToTry.push.apply(pathsToTry, extensions.map(function (e) { return ({ type: "extension", path: physicalPath + e }); }));
                pathsToTry.push({
                    type: "package",
                    path: path.join(physicalPath, "/package.json"),
                });
                var indexPath = path.join(physicalPath, "/index");
                pathsToTry.push.apply(pathsToTry, extensions.map(function (e) { return ({ type: "index", path: indexPath + e }); }));
            };
            for (var _a = 0, _b = entry.paths; _a < _b.length; _a++) {
                var physicalPathPattern = _b[_a];
                _loop_1(physicalPathPattern);
            }
        }
    }
    // log any paths that the loader would try
    console.log(requestedModule, ':', {pathsToTry});
    return pathsToTry.length === 0 ? undefined : pathsToTry;
}

- Yongjia Lin