How to use @use and @include some.thing(...) in scss?

[sangdth]

I've tried to dig around Nextjs issue archive as well as Google a lot, but can't find the correct answer to make it works.

I just want to customize the border-radius from Material's Shape module, and according to the doc, all I have to do is call

@use '@material/shape'; // Warning: Unknown at rule @use
// then use it
@include shape.radius($radius);

But it will crash with error :

SassError: Invalid CSS after "    @include shape": expected "}", was ".radius(0);"
        on line 5 of /Users/sangdth/Projects/saduak/front-end/assets/scss/global.scss
>>     @include shape.radius(0);

Please help. I'm hitting the head to the wall almost 3 days.

I'm using:

• Next: 9.3.3
• React 16.13.1
• Node: 12.14.1
• node-sass: 4.13.1
• sass: 1.26.3

---

Update:
OK, seems like I missed the VERY BIG notice about Dart Sass:

[bcanedo4]

I was just as confused as you were. I find it random that users have to click on some side triangle to find that out.