Should Material Design web applications use @import or @use?

Question

Looking at the Material Components Web documentation, I see inter alia @use "material/chips/styles"

When I visit app.scss – adopt-a-pup I see @import statements such as @import "@material/chips/mdc-chips";

I understand that @use is the newer modular way. Which sass approach should I use?

Could the glitch demos be out of date? Is there an example reference anywhere that makes use of both, say, mdc-chips and mdc-select?

Answer 1

You definitely should use @use. adopt-a-pup is very outdated. It references MDC 0.41.0, while current version is 13.0.0.

Unfortunately MDC examples are very scarce and documentation at material.io is outdated sometimes. I recommend using docs on their github repo, it is the most current.

Also some time ago I put together these two starter kits. They might be of some help in terms of examples how to use MDC:

1. Material Design Layout Kit for Angular
2. Basic Material Starter Kit