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

Material ComponentsのチュートリアルMDC-101 Web: Material Components (MDC) Basics (Web)を試したのでブログに残しておきます。

Material Componentsは、Material Designに則った一貫性のある画面を作るためのライブラリで、DesignとEngineering両方をうまく繋ぎ合わせる役割を担っています。

このチュートリアルはmdc-101〜mdc-103の３回に分けて、Material Componentsを使用しながらShrineと呼ばれるe-commerceサイトのアプリケーションを構築します。

mdc-101の内容は以下の通りです。

• ユーザー名、パスワードを入力するテキストフィールドの配置
• "Cancel" と "Next"ボタンの配置
• ShrineというWebサイト名の配置The name of the website (Shrine)
• Shrineロゴのイメージを配置

基本的にチュートリアル通りに実施すれば問題なかったのですが、いくつかハマったところがありました。

ちなみに今回試した環境はmacOS Catalinaでnpm、Node.jsの環境は以下の通りです。

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

---

gyp: No Xcode or CLT version detected!

まず、いきなりnpm installでエラーが発生してしまいました。

gyp: No Xcode or CLT version detected!
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/Users/tworks55/.nodebrew/node/v12.13.0/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack     at ChildProcess.emit (events.js:210:5)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:272:12)
gyp ERR! System Darwin 19.4.0

npm installでnode-gyp rebuildが失敗するときの対応 – kimulog を参考にXcodeをインストールし直したところ直りました。

---

@use is coming soon, but it's not supported in this version of Dart Sass.

次はwebpackのコンパイルでエラーが発生しました。

webpack: Compiling...
[0] Hash: 0a72c8de58c9b0bb212b782552ccd8628cf712ebe91b9e999714764143d7ab833074ed6711bfd4f1
Version: webpack 3.12.0
Child
    Hash: 0a72c8de58c9b0bb212b
    Time: 34ms
     2 assets
      [21] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
      [25] ./login.scss 489 bytes {0} [built] [failed] [1 error]
        + 24 hidden modules

    ERROR in ./login.scss
    Module build failed:
    @use "./mixins";
    ^
          @use is coming soon, but it's not supported in this version of Dart Sass.
       ╷
    23 │ @use "./mixins";
       │ ^^^^^^^^^^^^^^^
       ╵

こちらの記事を元にpackage.jsonを修正した、npm installしたところ直りました。 github.com

Edit the package.json file and change the dart sass version number "dart-sass": "^1.25.0" Then run npm install

チュートリアル通りに進んで行き、http://localhost:8080/で想定通りの画面が出ていればユーザー名とパスワードを入力し、Nextボタンをクリックすることで次画面に遷移します。

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