webpack - 「インポートするスタイルシートが見つかりません」という webpack エラーが発生した Material.io Web

Question

次の構成での material.io の開始で説明されているように、webpack で matrial.io を使用してみました。

webpack.config.js -->例とまったく同じ

const autoprefixer = require('autoprefixer');

module.exports = {
    entry: ['./app.scss'],
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'bundle.css',
                        },
                    },
                    {loader: 'extract-loader'},
                    {loader: 'css-loader'},
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: () => [autoprefixer()]
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sassOptions: {
                                implementation: require('sass'),
                                includePaths: ['./node_modules'],
                            },
                        },
                    }
                ],
            },
        ],
    },
};

app.scss -->例とまったく同じ

@use "~@material/ripple";

.test {
  @include ripple.surface;
  @include ripple.radius-bounded;
  @include ripple.states;
}

パッケージ.json

{
    "private": true,
    "scripts": {
        "build": "webpack --config=webpack.config.js"
    },
    "devDependencies": {
        "autoprefixer": "^9.7.4",
        "css-loader": "^3.4.2",
        "extract-loader": "^5.0.1",
        "file-loader": "^6.0.0",
        "postcss-loader": "^3.0.0",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "webpack": "^4.42.0",
        "webpack-cli": "^3.3.11"
    },
    "dependencies": {
        "material-components-web": "^4.0.0"
    }
}

ただし、実行するnpm run buildと次のエラーが発生します。

ERROR in ./app.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

@use "~@material/ripple";
^
      Can't find stylesheet to import.
  ╷
1 │ @use "~@material/ripple";
  │ ^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  stdin 1:1  root stylesheet
      in /path-to-file/app.scss (line 1, column 1)
 @ multi ./app.scss main[0]

私もgulpを試しましたが、同じエラーが発生していました。

どうすればそれを機能させることができますか？

そのためのレポも作成しました。クローンできます: https://github.com/nazari-dev/material.io