5

I have an issue with the @use rule when I use Webpack aliases.

In the partial theme.scss, I try to use a mixin from the style.scss.

/src/assets/css/_theme.scss
/components/UI/Button/_style.scss
/components/UI/Button/main.tsx
/components/UI/Radio/_style.scss
/components/UI/Radio/main.tsx

That works with a relative path :

@use '../../components/UI/Button/style' as button;

But not with an alias like :

@use 'Components/UI/Button';
@use 'Components/UI/Button/style';

In the second case, I got this error :

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

The alias has been declared in the tsconfig.json

"baseUrl": "./",
"paths": { "Components/*": ["src/components/*/main"] }

And used in my Webpack configuration with the TsconfigPathsPlugin :

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

I don't find any option in the sass-loader for specific resolve. How to use alias with saas-loader ?

Jerome
  • 603
  • 2
  • 5
  • 15

0 Answers0