尝试导入自定义Angular主题时Webpack失败

Question

当我尝试构建我的应用程序时出现的错误是

  

[webpack] [错误]模块构建失败：报价未公开（3805：24）
  //包装器元素，当
  //用户的内容不在mat-sidenav-container内。
                                            ^
     .mat-app-background {
  $ background：map-get（$ theme，background）;
  background-color：mat-color（$ background，background）;
     }

我正在使用 webpack 1.12.x 并尝试在我的main.scss文件中导入 Angular材质自定义主题。我正在按照here提供的步骤进行操作。

我的 webpack 加载程序看起来像这样：

module: {
loaders: [
  {
    test: /\.ts$/,
    loader: 'ts',
  },
  {
    test: /\.json$/,
    loader: 'json',
  },
  {
    test: /\.css$/,
    loader: 'style-loader!css-loader',
    exclude: [/app/],
  },
    {
        test: /\.scss$/,
        loader: 'style-loader!css-loader',
        exclude: [/app/],
    },
  {
    test: /\.(html|css)$/,
    loader: 'raw',
    include: [/app/],
    exclude: ['index.html'],
  },
  {
    test: /\.(woff|woff2|eot)$/,
    loader: 'url?prefix=font/&limit=5000'
  },
  {
    test: /\.ttf$/,
    loader: 'url?limit=10000&mimetype=application/octet-stream',
  },
  {
    test: /\.svg$/,
    loader: 'url?limit=10000&mimetype=image/svg+xml',
  },
],
}