5

Sass-loader seem to not use path (alias) declared in the typescript configuration. So a simple @use or @import give a not found error.

Webpack

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

tsconfig

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

The result

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

Is it possible to import the tsconfig path in the sass-loader ?

Jerome
  • 603
  • 2
  • 5
  • 15

1 Answers1

1

This is mainly because the extensions option doesn't include '.scss' inside TsconfigPathsPlugin, and you are importing file without its extension.

Solution1:

use full file name for example

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

Solution2:

add extension .scss to TsconfigPathsWebpackPlugin

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

try add console.log in node_modules/tsconfig-paths/lib/try-path.js getPathsToTry function could real help you debug.

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
  • 11
  • 3