`ERROR` Can't find stylesheet to import when I have `@use` in my `scss` files

[mahbubme]

TBH I am new in esbuild area and tried to move my current webpack configuration to esbuild. Here is my esbuild configuration file.

import {sassPlugin} from 'esbuild-sass-plugin'
import path from 'path'
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

await esbuild.build({
    entryPoints: [
        { out: 'frontend', in: './resources/ts/frontend/index.ts'},
        { out: 'block-editor', in: './resources/ts/block-editor/index.ts'},
        { out: 'global', in: './resources/ts/global/index.ts'},
    ],
    bundle: true,
    minify: true,
    outdir: 'assets',
    plugins: [
        sassPlugin(),
    ],
}).catch(() => process.exit(1));

So when running npm run build I am getting the following errors pointing that unable to find the stylesheet to import.

Any ideas how can I fix the issue?

[anitagraham]

I have been successfully using @use in my SCSS files with this plugin for a couple of months. However, on the way I did note #136 where using @ in the paths was causing an error. Perhaps use a different path prefix? #136 has a good description and response to this problem.

I am just revisiting the issue as I have changed my path structure and need to rewrite my importmapper.

[glromeo]

thank you for giving those pointers @anitagraham I'll only add that we use ~ in front of mamespaced packaged to avoid headaches! I hope this helps