0

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.

OinkQuack
  • 13
  • 4

1 Answers1

0

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.

Konstantin Lyakh
  • 781
  • 6
  • 15
  • Hi Konstantin. Sorry for the late thank you and reply. When you say "Also you need to add package @material/icon-button.", is this as an import, use or include? – OinkQuack Apr 15 '22 at 14:51
  • @OinkQuack as far as I remember I was talking about package.json. I guess in your codesandbox example this package wasn't included in package.json. Probably it was updated since, because now it does include @material/icon-button package. – Konstantin Lyakh Apr 16 '22 at 18:48
  • @OinkQuack to sum up, there are multiple ways to include component styles into your CSS: 1) `@use '@material/icon-button/mdc-icon-button';` - this one calls `@include icon-button.core-styles` for you, so no additional call is needed, otherwise styles will be duplicated. 2) `@use '@material/icon-button/icon-button'` and then later `@include icon-button.core-styles` – Konstantin Lyakh Apr 16 '22 at 18:51