Material Componentsのチュートリアル mdc-102 Web

MDC-102 Web: Material Structure and Layout (Web)を試してみましたのでブログに残しておきます。

前回記事の続編です。

今回はログイン後のHome画面に

• ナビゲーション
• 商品イメージのリスト

を作成します。

---

完成後の画面はこのようになります。

前回同様にmacOS Catalinaでnpm、Node.jsの環境で実施しています。

npm -> 6.13.4 Node.js -> v12.13.0

---

今回もpackage.json内dart-sassのバージョンを"^1.25.0"に修正する必要がありましたが、それ以外に以下３つもバージョンを4.0.0に変更する必要がありました。

"@material/drawer": "^5.1.0",
"@material/image-list": "^5.1.0",
"@material/list": "^5.1.0",

↓

"@material/drawer": "^4.0.0",
"@material/image-list": "^4.0.0",
"@material/list": "^4.0.0",

参考にしたサイトはこちらになります。

[MDC-102] Two forwarded modules both define a variable named $mdc-feature-mdc-feature-all-features · Issue #123 · material-components/material-components-web-codelabs · GitHub

こんな感じでmdc-102のチュートリアルは終了です。続きはまた次回に。