Material-components-web: [@material/animation] Can't find stylesheet to import

[JamesIves]

Bug report

Steps to reproduce

1. Follow the documentation to import the @material/animation stylesheet using Sass modules.
2. It will throw an error saying it can't find an applicable stylesheet.

Actual behavior

    ERROR in ./src/scss/main.scss
    Module build failed: 
    @use "@material/animation";
    ^
          Can't find stylesheet to import.
       ╷
    11 │ @use "@material/animation";

Expected behavior

The stylesheet should import. I was able to get this to work by downgrading to version 4, however the docs are dated.

Your Environment:

| Software | Version(s) |
| ---------------- | ---------- |
| MDC Web | 5.1.0
| Browser | Chrome / Terminal
| Operating System | Mac OS 10.13.6

Possible solution

Looks like the @material/animation node module is not exporting a stylesheet 😭

[asyncLiz]

Looks like it is distributed with an index file (https://unpkg.com/@material/[email protected]/_index.scss) and works when I compile locally. This is most likely one of two issues:

1. You may be using node-sass instead of sass, which does not support Sass modules. The solution is to uninstall node-sass and install sass, it's a drop-in replacement.

2. You may be using webpack's sass-loader which has a known issue (https://github.com/webpack-contrib/sass-loader/issues/804). The workaround is to use webpackImporter: false as described in https://github.com/webpack-contrib/sass-loader/issues/804#issuecomment-586095020

Closing since I'm able to compile locally. Please comment if you're still having trouble and neither of those solutions work!

[JamesIves]

Option 2 was the solution, thanks!