feat: Add index stylesheets to mdc-image-list and mdc-layout-grid.

[nex3]

Adds indexes to GitHub-only stylesheets that aren't covered by #5539.

[abhiomkar]

Not sure why the build is failing for mdc-image-list.

loader/src??ref--4-2!./node_modules/sass-loader/lib/loader.js??ref--4-3!./test/screenshot/spec/mdc-image-list/fixture.scss) Module build failed (from ./node_modules/sass-loader/lib/loader.js): @forward "@material/feature-targeting" as mdc-feature-*; ^ Can't find stylesheet to import. ╷ 1 │ @forward "@material/feature-targeting" as mdc-feature-*; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ packages/mdc-image-list/_mixins.import.scss 1:1 @import stdin 23:9 root stylesheet 

Can you replace @import with @use in test/screenshot/spec/mdc-image-list/fixture.scss file to see if that fixes the issue?

[nex3]

Looks like that did it 🤷‍♀️.

[abhiomkar]

@nex3 Any idea why Sass was not able to resolve module when @import statement is used?

Material Web Components (MWC) is still using @import statements and it broke their Sass build.

/cc @e111077 @dfreedm

[trimox]

@abhiomkar I may have stumbled on similar issue upgrading Angular MDC to v5.0-canary branch. If a component package folder contains index.ts along with _index.scss the build fails.

Works successfully with @use '@material/checkbox/_index' as checkbox;

Fails to compile using @use '@material/checkbox'; or @use '@material/checkbox' as checkbox;

Edit: Since @material/button does not contain index.ts the use of @use '@material/button'; compiles fine.

[nex3]

Does anyone have a reproduction that just uses the command-line Sass compiler, so I can debug into it and see what's going wrong here?

[abhiomkar]

This* surely looks like sass-loader bug when handling index file.

I'm able to reproduce only with sass-loader (Webpack Sass plugin):
https://github.com/abhiomkar/sass-module-bug

[abhiomkar]

Created bug with sass-loader.