Getting error when trying to set up mdc-table in my angular app

Question

I'm trying to add an mdc-table component to my angular app by following the documentation from here: https://material.io/develop/web/components/data-tables/

If i understand correctly i have to add the following two statements to my .scss component file:

@use "@material/checkbox/mdc-checkbox"; // <-- i will implement row selection
@use "@material/data-table/mdc-data-table";

and prior to that run:

npm install @material/checkbox
npm install @material/data-table

I did all this but i keep getting:

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
   ╷
24 │ @use "@material/animation/functions" as functions2;
   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/@material/checkbox/_mixins.scss 24:1       @use
  node_modules/@material/checkbox/mdc-checkbox.scss 23:1  @use
  /Users/fgabriel/lister/lister-table/src/app/web-table/web-table.component.scss 6:1                                               root stylesheet
errors @ client:159
(anonymous) @ socket.js:47
sock.onmessage @ SockJSClient.js:63
EventTarget.dispatchEvent @ sockjs.js:170
(anonymous) @ sockjs.js:888
SockJS._transportMessage @ sockjs.js:886
EventEmitter.emit @ sockjs.js:86
WebSocketTransport.ws.onmessage @ sockjs.js:2962
wrapFn @ zone-evergreen.js:1218
invokeTask @ zone-evergreen.js:399
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1647

I tried several things but i can not make it work, any help is much appreciated.

Answer 1

Trying using the import

@import "@material/checkbox/mdc-checkbox"; // <-- i will implement row selection
@import "@material/data-table/mdc-data-table";