How do I import all MDC packages individually rather than as material-components-web?

Question

I am at the optimisation stage and have, up to this point, been importing material-components-web. Now, I want to import the entire library as separate packages so that I can comment out the modules that I'm not using. So, I read the docs and added the JavaScript imports and initialisations and the SASS @uses and @includes for every package and renamed duplicate style namespaces and commented out the duplicate @use references. However, I am fighting with an undefined mixin.

Error
Undefined mixin.
   ╷
77 │ @include icon-button.core-styles; // Undefined mixin
   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  stdin 77:1  root stylesheet

Here is a codesandbox with just the JS imports and SCSS @use and @include statements demonstrating the issue.

Answer 1

You need to replace @use '@material/icon-button' with @use '@material/icon-button/icon-button'. Also you need to add package @material/icon-button. Currently package structure is not consistent across the package set. I guess MDC team is experimenting with its structure.

Also remove @use '@material/icon-button/mdc-icon-button';. These /mdc-<package-name>.scss or /styles.scss files are needed just for convenience in case you want to include CSS right away, without additional @include <package-name>.core-styles call.