I'm pretty new to using sass and I'm having some trouble using a mixin for Material.io's icon buttons.
The page I linked describes using the density($density-scale)
mixin, but I can't seem to figure out how to use it. The Getting Started guide shows an example of how to use a mixin for an mdc-button
, so I tried doing the same thing for an mdc-icon-button
. Here are some things I tried.
@use "@material/icon-button/mdc-icon-button";
@use "@material/icon-button";
// ^ The line above results in this error: SassError: Can't find stylesheet to import.
For the actual element, since this import didn't work, I tried the following.
.mdc-icon-button {
@include icon-button.density(-1);
// ^ SassError: There is no module with the namespace "icon-button".
@include mdc-icon-button.density(-1);
@include mdc-icon-button-density(-1);
@include density(-1);
// ^ All of these lines cause the following error: SassError: Undefined mixin.
}
I'm just not sure what to do at this point. How can I use the density mixin for this component?
This actually turns out to be a bug with sass-loader
. You can check here for a temporary workaround while something else is worked out. Using the workaround causes imports to not fail anymore, and the documentation is still accurate for the components.