从节点模块导入SCSS会导致Webpack错误

Question

我有一个使用a starter kit called ASPNet Core Angular Universal构建的Angular 7应用程序，我想使用一些节点模块（Bootstrap，Font Awesome和MDBootstrap）中的SCSS文件。我尝试将它们导入单个scss文件中。 ，在app.component中使用，如下所示：

@import '~font-awesome/scss/font-awesome.scss';
@import '~angular-bootstrap-md/scss/bootstrap/bootstrap.scss';
@import '~angular-bootstrap-md/scss/mdb-free.scss';

但是在构建过程中出现错误：

  ./ClientApp/app/app.component.scss中的

错误   （./node_modules/css-loader/dist/cjs.js!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js!./ClientApp/app/app.component.scss ）找不到模块：错误：无法解析“ ../img/svg/arrow_right.svg”   '...'

我尝试在webpack.addition.js中添加resolve-url-loader，但是没有用：

const sharedModuleRules = [
// sass
{
test: /.scss$/,
loaders: ['to-string-loader', 'css-loader', 'resolve-url-loader', 'sass-loader']
},
// font-awesome
{ test: /.(woff2?|ttf|eot|svg)$/, loader: 'url-loader?limit=10000' }
];