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 ?