Build Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): Undefined mixin

Question

I'm trying to create a style class similar to the example at Primeflex

This is a simple angular application on v16.9.1 with primeflex installed. I'm looking to reuse some settings for input fields.

Started off by updating styles.scss:

@import "primeflex/primeflex.css";

.label{
    padding-right: 20px;
}

@mixin myMix{
 @include styleclass('w-full')
}

.input{
    @include myMix    
}

And first build produced:

> ng build

✔ Browser application bundle generation complete.

./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Undefined mixin.
  ╷
8 │  @include styleclass('w-full')
  │  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/styles.scss 8:2   myMix()
  src/styles.scss 12:5  root stylesheet

./src/styles.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Undefined mixin.
   ╷
11 │  @include styleclass('w-full')
   │  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src/styles.scss 11:2  myMix()
  src/styles.scss 15:5  root stylesheet

Here is the list of packages.

├── @angular-devkit/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @types/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]