javascript - 尝试在我的 Angular 应用程序中设置 mdc-table 时出错

Question

我正在尝试按照此处的文档将 mdc-table 组件添加到我的 Angular 应用程序中：https ://material.io/develop/web/components/data-tables/

如果我理解正确，我必须将以下两个语句添加到我的 .scss 组件文件中：

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

在运行之前：

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

我做了这一切，但我不断得到：

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

我尝试了几件事，但我无法使它工作，非常感谢任何帮助。

Answer 1

尝试使用导入

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