Material-components-web: [mdc-select/mdc-list] Broken SASS compilation after V5

[raphaelsantos]

In my components SASS file I import these:

@import '@material/list/mdc-list';
@import '@material/menu-surface/mdc-menu-surface';
@import '@material/menu/mdc-menu';
@import '@material/select/mdc-select';

it used to work, but now with v5 I'm getting this error:

{
  "status": 1,
  "file": "../../node_modules/@material/list/mdc-list.scss",
  "line": 22,
  "column": 10,
  "message": "Invalid CSS after \"@include mixins\": expected 1 selector or at-rule, was \".core-styles;\"",
  "formatted": "Error: Invalid CSS after \"@include mixins\": expected 1 selector or at-rule, was \".core-styles;\"\n        on line 22 of ../../node_modules/@material/list/mdc-list.scss\n        from line 1 of src/sass/drop-down.scss\n>> @include mixins.core-styles;\n\n   ---------^\n"
}

I'm using the latest version of node-sass.

[DRiFTy17]

@raphaelsantos node-sass doesn't support @use sass modules yet... If you switch to the dart implementation by installing the sass package (should be interchangeable API-wise) then it will work. The only issue with this is that the compilation is a lot slower on large libraries, and it forces consuming applications of our own sass libraries (that take a dependency on MDC) to also use dart sass.

[asyncLiz]

Closing since MDC switched to Sass modules in v5, so this is working as intended. The recommendation for client libraries that consume MDC is to use Dart sass for compilation.