How to add white box shadow when using mdc elevation?-CodePudding

I'm only using the elevation part of material design (mdc-elevation), and simply wanting to add a few utility classes. In my scss file, I have this:

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

@for $z-value from 0 through 24 {
    .mdc-elevation-white--z#{$z-value} {
        @include mdc-elevation.elevation($z-value, white);
    }
}

But my compiler complains:

Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: There is no module with the namespace "elevation-theme".

I have no idea whether I'm doing it right, as the documentation doesn't have many examples, and going into the source code is like going down a deep, abstract rabbit hole.

I'm using sass, not node-sass, so modules should be working. If I remove the for loop (and keep the @use ...), everything works just fine and dandy.

What could be wrong?

CodePudding user response：

If you want to use mdc-elevation mixins you need to use another SCSS: @use "@material/elevation".

The one you used @use "@material/elevation/mdc-elevation"; is not adding mixins to current context, it just renders package CSS.