Webpack 使用“材料设计”网页包服务器设置时Npm buid失败

我正在使用MDC Web与Sass和ES2015方法集成材料设计组件，如下所述，

需要以下节点依赖项：

webpack: Bundles Sass and JavaScript
webpack-dev-server: Development server
sass-loader: Loads a Sass file and compiles it to CSS
node-sass: Provides binding for Node.js to Sass, peer dependency to sass-loader
css-loader: Resolves CSS @import and url() paths
extract-loader: Extracts the CSS into a .css file
file-loader: Serves the .css file as a public URL

我的机器上安装了

node.js

。我在我的工作区中打开了命令提示符，然后按照上面的材料设计指南，在项目文件夹中安装了所有模块和上面的依赖项

当我使用

npm run build

构建项目时，会出现此错误

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration[0].module.rules[0].use should be one of these:
   non-empty string | function | object { ident?, loader?, options?, query? } | function | [non-empty string | function | object { ident?, loader?, options?, query? }]
   -> Modifiers applied to the module when rule is matched
   Details:
    * configuration[0].module.rules[0].use[4] should be a string.
    * configuration[0].module.rules[0].use[4] should be an instance of function
    * configuration[0].module.rules[0].use[4] should be an object.
    * configuration[0].module.rules[0].use[4] should be one of these:
      non-empty string | function | object { ident?, loader?, options?, query? }
    * configuration[0].module.rules[0].use[4] should be one of these:
      non-empty string | function | object { ident?, loader?, options?, query? }
      -> An use item
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sampleproject@1.0.0 build: `webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the sampleproject@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

下面是我的

webpack.config.js

文件

const autoprefixer = require('autoprefixer');
const path = require("path");

function tryResolve_(url, sourceFilename) {
  // Put require.resolve in a try/catch to avoid node-sass failing with cryptic libsass errors
  // when the importer throws
  try {
    return require.resolve(url, { paths: [path.dirname(sourceFilename)] });
  } catch (e) {
    return "";
  }
}

function tryResolveScss(url, sourceFilename) {
  // Support omission of .scss and leading _
  const normalizedUrl = url.endsWith(".scss") ? url : `${url}.scss`;
  return (
    tryResolve_(normalizedUrl, sourceFilename) ||
    tryResolve_(
      path.join(
        path.dirname(normalizedUrl),
        `_${path.basename(normalizedUrl)}`
      ),
      sourceFilename
    )
  );
}

function materialImporter(url, prev) {
  if (url.startsWith("@material")) {
    const resolved = tryResolveScss(url, prev);
    return { file: resolved || url };
  }
  return { file: url };
}
module.exports = [{
    entry: ['./app.scss','./app.js'],
    output: {
      // This is necessary for webpack to compile
      // But we never use style-bundle.js
      filename: 'bundle.js',
    },
    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: {
                importer: materialImporter
              },
              options: {                   
                sassOptions: {
                  includePaths: ['./node_modules']
                },
                name: 'bundle.css',
              },
            },
            ,
          {            
            loader: 'babel-loader',
            query: {
              presets: ['@babel/preset-env'],
            },
          }
          ]
        }
      ]
    },
  }];

我尝试过的选择

添加了一个Sass导入程序，但我仍然得到了上面的错误，

---

为此链接中的嵌套节点模块配置Sass导入器，

在babel loader之前有一条空规则（两个连续的逗号）。除此之外-使用babel loader加载sass文件？@madflow yeah这就是web材料设计组件的“入门”中给出的内容