Let's assume I have files below in my src/style/ folder:

_fonts.scss 
_globals.scss 
_media.scss 
_mixins.scss 
_normalize.scss 
_utils.scss 
_variables.scss

And here is src/style.scss:

@use 'styles/normalize';
@use 'styles/fonts';
@use 'styles/mixins';
@use 'styles/media';
@use 'styles/variables';
@use 'styles/utils';
@use 'styles/globals';

When I tried to use mixin from _mixins.scss (in component.scss) ,

.search__button {
  @include reset-button;
}

then it throws error like:

✘ [ERROR] Undefined mixin.
   ╷
23 │   @include reset-button;
   │   ^^^^^^^^^^^^^^^^^^^^^
   ╵
  src/app/shared/components/search/searchponent.scss 23:3  root stylesheet [plugin angular-sass]

If I remove @use 'styles/mixins' from src/style.scss and import with '@use' directly in component (also in angular.json), it will works. However, I guess there might be a cleaner way.

Is there a way to import _mixins.scss in style.scss for example (mean globally) and use it whenever I want?