Duplicated CSS rules when importing .scss files in Angular components

Question

In my angular project I have an mixins.scss file referenced across multiple components. It looks like this:

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}
...

Now, this file is referenced in multiple components' stylesheets with the

@import 'mixins';

(the path is defined in the stylePreprocessorOptions/includePaths)

Thing is that these rules are repeated in every style file of all Angular components using that import. When I remove it I get an error that the mixin could not be found.

Is there any way to "trick" Angular to use just one instance of the mixins.scss? Importing it inside of styles.scss doesn't work. I've also tried replacing the @imports with @use (https://sass-lang.com/documentation/at-rules/use) but it doesn't matter.

What about custom-webpack (https://www.npmjs.com/package/@angular-builders/custom-webpack)? Are there any rules I could put to remove the styles during the build?

Marcin