Material-components-web: [mdc-dialog] [mdc-card] Inconsistent or unclear import/use, namespace, and mixin instructions

[komali2]

Your Environment:

"@material/button": "^5.1.0",
"@material/dialog": "^5.1.0",

OS: Ubuntu 18.04
Build Environment: dart-sass, webpack, webpack dart sass loader

I was unclear, on the instructions in the mdc card readme, how to use a mixin. A helpful person pointed out that, though it isn't noted in the documents, to use the mixins listed in the table, you must do the following:

@use "@material/card/mdc-card"; // generates classes for .mdc-card
@use "@material/card"; // does not generate classes, is used to access mixins and variables

div {
  // The prefix for @use "@material/card" is `card`
  @include card.fill-color(#DADCE0);
}

I'd like to use the excellent mixins that are allegedly provided for the dialog package.

So, I try

 @use "@material/dialog/mdc-dialog";
 @use "@material/dialog";

But, I get the following error:

SassError: Can't find stylesheet to import.

Hm. How can I use the dialog mixins?

Further information can be found at the following issue, which is now closed, so I hope it's ok to open a new one: https://github.com/material-components/material-components-web/issues/5708

[asyncLiz]

We just went through a document refresh to try and simplify a few things, including this confusion point. At the moment, we are encouraging users to use a single import point and to apply core styles manually.

This is side-effect free and a bit more explicit and less magical about what's happening.

@use "@material/dialog";

@include dialog.core-styles; // apply default styles

.my-dialog {
  // all mixins are prefixed with the module's namespace
  @include dialog.title-ink-color(blue, 1);
}

Our readmes have been updated to reflect this. Let me know if you have any questions.

[komali2]

Oh, I'm happy to hear you all are on top of this! It was always my biggest pain point with MDC.

Thanks for the response.

I tried your included code, unfortunately, I'm still getting the following error:

SassError: Can't find stylesheet to import.
    ╷
172 │ @use "@material/dialog";
    │ ^^^^^^^^^^^^^^^^^^^^^^^

I also tried it with mdc-chips and got the same error.

SassError: Can't find stylesheet to import.
    ╷
174 │ @use "@material/chips";
    │ ^^^^^^^^^^^^^^^^^^^^^^

Both are on version:

    "@material/chips": "^5.1.0",
    "@material/dialog": "^5.1.0",

I tried updating with npm install --save @material/dialog after deleting them from my package.json, but it seems they kept the same version. Do I need to install a forward/dev/beta branch?

[asyncLiz]

This sounds like you're using sass-loader. I just tried compiling my example Sass and it worked for me.

With sass-loader you need webpackImporter: false as described in https://github.com/webpack-contrib/sass-loader/issues/804#issuecomment-586095020

[kintz09]

@komali2 I'll be curious to hear if you are able to get the SassError resolved with the workaround for the bug @asyncLiz mentioned. Configuring the sass-loader option webpackImporter: false has resolved the error for my projects when running on MacOS and Windows. However, I still get the error when compiling the project in a docker container running Debian Linux.

Since Ubuntu is based on Debian, you may run into the same issue I've described in webpack-contrib/sass-loader#822. If the workaround does fix your error, knowing which version of Ubuntu you are running may help me find a workaround for my CI/CD pipeline.

[komali2]

This sounds like you're using sass-loader. I just tried compiling my example Sass and it worked for me.

With sass-loader you need webpackImporter: false as described in webpack-contrib/sass-loader#804 (comment)

Following these steps solved the issue for us. Yes we're using sass-loader.

Thanks for your help!

[komali2]

@komali2 I'll be curious to hear if you are able to get the SassError resolved with the workaround for the bug @asyncLiz mentioned. Configuring the sass-loader option webpackImporter: false has resolved the error for my projects when running on MacOS and Windows. However, I still get the error when compiling the project in a docker container running Debian Linux.

Since Ubuntu is based on Debian, you may run into the same issue I've described in webpack-contrib/sass-loader#822. If the workaround does fix your error, knowing which version of Ubuntu you are running may help me find a workaround for my CI/CD pipeline.

• Ubuntu 18.04.4
• Intel® Core™ i7-8650U CPU @ 1.90GHz × 8
• Intel® UHD Graphics 620 (Kabylake GT2)
• 64-bit
• GNOME 3.28.2