时间戳

首页 > 解决方案 > 从节点模块导入 SCSS 会导致 Webpack 错误

node.js - 从节点模块导入 SCSS 会导致 Webpack 错误

问题描述

我有一个 Angular 7 应用程序，使用名为 ASPNet Core Angular Universal 的入门工具包构建，我想使用来自几个节点模块（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' }
];

标签： node.jsangularwebpacksass

解决方案

推荐阅读