导入MDC材料组件SASS

Question

我需要完成这个练习：https://codelabs.developers.google.com/codelabs/mdc-102-web#2，但在执行完所有这些步骤后，我得到一个错误：

PS C:\Users\yuriy\Documents\GitHub\material\mdc-101\starter> npm start

> mdc-101-web@0.0.0 start C:\Users\yuriy\Documents\GitHub\material\mdc-101\starter
> webpack-dev-server --progress

 10% [3] building modules 1/1 modules 0 active
Project is running at http://localhost:8081/
webpack output is served from /
[0] Hash: 555d1685cfed3b864a6318f77429ebbf5a38e07aeeac2c79f02ede37da1c2e8bbb7df60d48519ced     
Version: webpack 3.12.0
Child
    Hash: 555d1685cfed3b864a63
    Time: 5520ms
                    Asset     Size  Chunks                    Chunk Names
         bundle-login.css  56.6 kB          [emitted]
    style-bundle-login.js   335 kB       0  [emitted]  [big]  main
       [2] multi (webpack)-dev-server/client?http://localhost:8081 ./login.scss 40 bytes {0} [built]
       [3] (webpack)-dev-server/client?http://localhost:8081 7.93 kB {0} [built]
       [4] ./node_modules/url/url.js 23.3 kB {0} [built]
       [5] ./node_modules/node-libs-browser/node_modules/punycode/punycode.js 14.7 kB {0} [built]
       [7] ./node_modules/url/util.js 314 bytes {0} [built]
       [8] ./node_modules/querystring-es3/index.js 127 bytes {0} [built]
      [11] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
      [12] ./node_modules/ansi-regex/index.js 135 bytes {0} [built]
      [13] ./node_modules/loglevel/lib/loglevel.js 8.86 kB {0} [built]
      [14] (webpack)-dev-server/client/socket.js 1.08 kB {0} [built]
      [15] ./node_modules/sockjs-client/dist/sockjs.js 181 kB {0} [built]
      [16] (webpack)-dev-server/client/overlay.js 3.67 kB {0} [built]
      [22] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
      [24] (webpack)/hot/emitter.js 77 bytes {0} [built]
      [26] ./login.scss 62 bytes {0} [built]
        + 12 hidden modules
Child
    Hash: 18f77429ebbf5a38e07a
    Time: 3083ms
                   Asset    Size  Chunks                    Chunk Names
    style-bundle-home.js  335 kB       0  [emitted]  [big]  main
       [2] multi (webpack)-dev-server/client?http://localhost:8081 ./home.scss 40 bytes {0} [built]
       [3] (webpack)-dev-server/client?http://localhost:8081 7.93 kB {0} [built]
       [4] ./node_modules/url/url.js 23.3 kB {0} [built]
       [5] ./node_modules/node-libs-browser/node_modules/punycode/punycode.js 14.7 kB {0} [built]
       [7] ./node_modules/url/util.js 314 bytes {0} [built]
       [8] ./node_modules/querystring-es3/index.js 127 bytes {0} [built]
      [11] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
      [12] ./node_modules/ansi-regex/index.js 135 bytes {0} [built]
      [13] ./node_modules/loglevel/lib/loglevel.js 8.86 kB {0} [built]
      [14] (webpack)-dev-server/client/socket.js 1.08 kB {0} [built]
      [15] ./node_modules/sockjs-client/dist/sockjs.js 181 kB {0} [built]
      [16] (webpack)-dev-server/client/overlay.js 3.67 kB {0} [built]
      [22] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
      [24] (webpack)/hot/emitter.js 77 bytes {0} [built]
      [26] ./home.scss 565 bytes {0} [built] [failed] [1 error]
        + 12 hidden modules

    ERROR in ./home.scss
    Module build failed:
    undefined
    ^
          Can't find stylesheet to import.
       ╷
    22 │ @use '@material/theme/theme-color';
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
       ╵
      node_modules\@material\list\_variables.scss 22:1           @forward
      node_modules\@material\drawer\mdc-drawer.import.scss 13:1  @import
      stdin 2:9                                                  root stylesheet
          in C:\Users\yuriy\Documents\GitHub\material\mdc-101\starter\node_modules\@material\list\_variables.scss (line 22, column 1)
     @ multi (webpack)-dev-server/client?http://localhost:8081 ./home.scss
Child
    Hash: eeac2c79f02ede37da1c
    Time: 2339ms
              Asset    Size  Chunks                    Chunk Names
    bundle-login.js  526 kB       0  [emitted]  [big]  main
       [5] ./node_modules/@material/ripple/foundation.js 23.4 kB {0} [built]
       [6] ./node_modules/@material/ripple/util.js 1.91 kB {0} [built]
       [8] ./node_modules/@material/textfield/constants.js 2.81 kB {0} [built]
      [24] multi (webpack)-dev-server/client?http://localhost:8081 ./login.js 40 bytes {0} [built]
      [25] (webpack)-dev-server/client?http://localhost:8081 7.93 kB {0} [built]
      [26] ./node_modules/url/url.js 23.3 kB {0} [built]
      [33] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
      [35] ./node_modules/loglevel/lib/loglevel.js 8.86 kB {0} [built]
      [36] (webpack)-dev-server/client/socket.js 1.08 kB {0} [built]
      [38] (webpack)-dev-server/client/overlay.js 3.67 kB {0} [built]
      [44] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
      [46] (webpack)/hot/emitter.js 77 bytes {0} [built]
      [48] ./login.js 385 bytes {0} [built]
      [49] ./node_modules/@material/textfield/index.js 1.36 kB {0} [built]
      [61] ./node_modules/@material/ripple/index.js 1.29 kB {0} [built]
        + 47 hidden modules
Child
    Hash: 2e8bbb7df60d48519ced
    Time: 2142ms
             Asset    Size  Chunks                    Chunk Names
    bundle-home.js  437 kB       0  [emitted]  [big]  main
       [0] ./node_modules/@material/list/constants.js 3.35 kB {0} [built]
       [5] ./node_modules/@material/list/foundation.js 28.5 kB {0} [built]
       [8] multi (webpack)-dev-server/client?http://localhost:8081 ./home.js 40 bytes {0} [built]
       [9] (webpack)-dev-server/client?http://localhost:8081 7.93 kB {0} [built]
      [10] ./node_modules/url/url.js 23.3 kB {0} [built]
      [11] ./node_modules/node-libs-browser/node_modules/punycode/punycode.js 14.7 kB {0} [built]
      [13] ./node_modules/url/util.js 314 bytes {0} [built]
      [17] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
      [19] ./node_modules/loglevel/lib/loglevel.js 8.86 kB {0} [built]
      [20] (webpack)-dev-server/client/socket.js 1.08 kB {0} [built]
      [22] (webpack)-dev-server/client/overlay.js 3.67 kB {0} [built]
      [28] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
      [30] (webpack)/hot/emitter.js 77 bytes {0} [built]
      [32] ./home.js 110 bytes {0} [built]
      [33] ./node_modules/@material/list/index.js 1.25 kB {0} [built]
        + 23 hidden modules
webpack: Failed to compile.

我尝试过使用npm审计，但它不起作用。我曾尝试将fibers版本更改为5.0.0，但无论如何它都不起作用。我应该改变什么？我的代码可以在这里找到：https://github.com/yytrofimov/material

Answer 1

这两个组件都应安装在版本6.0.0中：

npm install @material/drawer@^6.0.0
npm install @material/list@^6.0.0