webpack sass-loader 不使用 tsconfig 路径

Question

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

\n

网页包

\n

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

\n

tsconfig

\n

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

\n

结果

\n

SassError: SassError: Can't find stylesheet to import.\n1 \xe2\x94\x82 @use 'Components/UI/Grid';\n

\n

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

\n

Answer 1

这主要是因为扩展选项内部不包含“.scss” TsconfigPathsPlugin，并且您导入的文件没有扩展名。

解决方案1：

例如使用完整文件名

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

解决方案2：

添加扩展.scss至 TsconfigPathsWebpackPlugin

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

尝试添加console.log功能node_modules/tsconfig-paths/lib/try-path.js 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;
}