错误：模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）：

Posted 2023-03-13

【中文标题】错误：模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）：

【英文标题】：Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):

【发布时间】：2021-11-11 02:16:35

【问题描述】：

我有以下错误：

./src/styles.scss - ModuleError：模块错误（来自 ./node_modules/postcss-loader/dist/cjs.js）： /Users/pedrocovarrubias/Documents/GitHub/Angular/conFusion/node_modules/font-awesome/scss/_path.scss:6:2：无法解析'../node_modules/font-awesome/node_modules/font-awesome/fonts /fontawesome-webfont.eot' 在'/Users/pedrocovarrubias/Documents/GitHub/Angular/conFusion/src' 在 Object.emitError (/Users/pedrocovarrubias/Documents/GitHub/Angular/conFusion/node_modules/webpack/lib/NormalModule.js:562:6) 在声明处（/Users/pedrocovarrubias/Documents/GitHub/Angular/conFusion/node_modules/@angular-devkit/build-angular/src/webpack/plugins/postcss-cli-resources.js:145:28） 在 processTicksAndRejections (internal/process/task_queues.js:95:5) 在异步 LazyResult.runAsync (/Users/pedrocovarrubias/Documents/GitHub/Angular/conFusion/node_modules/postcss/lib/lazy-result.js:411:15) 在异步 Object.loader (/Users/pedrocovarrubias/Documents/GitHub/Angular/conFusion/node_modules/postcss-loader/dist/index.js:97:14)

这是我的 style.scss 代码：

/* You can add global styles to this file, and also import other style files */
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';

// some basic resets 

$lt-gray: #ddd;
$background-dark: #512DA8;
$background-light: #9575CD;
$background-pale: #D1C4E9;
$primary-color-dark:   #512DA8;
$primary-color:        #673AB7;
$primary-color-light:  #D1C4E9;
$primary-color-text:   #FFFFFF;
$accent-color:         #FFC107;
$primary-text-color:   #212121;
$secondary-text-color: #757575;
$divider-color:        #BDBDBD;

@mixin zero-margin($pad-up-down, $pad-left-right) 
    margin: 0px auto;
    padding: $pad-up-down $pad-left-right;


body  
  padding: 0; 
  margin: 0; 
  font-family: Roboto, sans-serif; 


.container 
    margin: 20px;
    display:flex;


.background-primary 
  background-color: $background-dark!important;

.background-accent 
  background-color: $accent-color!important;

.text-floral-white 
  color: floralwhite!important;


.flex-spacer 
flex: 1 1 auto;

有人可以帮忙吗？

【问题讨论】：

当您注释掉 styles.scss 中的所有内容时，它会解决问题吗？

您使用的是最新版本的 Node.js？更新版本的 Angular 仅适用于更新版本的 Node

当您注释掉 styles.scss 中的所有内容时，它会解决问题吗？是的，如果我从 styles.scss 中取出所有内容，问题就解决了

好的，能不能逐行慢慢恢复styles.scss，看看是哪一行导致的问题？ （恢复一半，然后你知道问题出在哪一半，然后是下一个季度，等等）

您使用的是最新版本的 Node.js？较新版本的 Angular 仅适用于较新版本的 Node 是的，我使用的是 node.js 14.x，与 Angular 12.x 一起使用的版本也是如此

【参考方案1】：

要从 style.scss 中的 node_modules 导入，请使用以下语法：

这一行是从 node_modules 导入的……正确的做法：

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

此行错误需要使用~语法：

@import '../node_modules/font-awesome/scss/font-awesome';

应该是：

@import '~font-awesome/scss/font-awesome';

或者如果这不起作用，请像这样在 angular.json 中导入：

"styles": [ "src/styles.scss", "node_modules/font-awesome/scss/font-awesome" ]

确保添加到 angular.json 中的两个“样式”属性并重新启动您的开发服务器以获取更改。以这种方式从 node_modules 导入时，请确保您尝试导入的文件存在于 node_modules 目录中。

【讨论】：

我在 angular.json 中添加了这样的：“../node_modules/font-awesome/scss/font-awesome.scss”，编译没问题，但图标不显示html，有什么建议吗？

我刚刚在上面添加了 3 个 cmets - 确保你应用了我刚刚添加的所有 3 个其他 cmets

您需要 .. 吗？我把它拿出来但没有改变你重新启动了角度开发服务器吗？是的，您是否为 angular.json 中的两个样式属性添加了这一行？是的

好的，我在上面的主要评论区添加了一条新评论 - 请也检查一下

我修好了，我必须在styles.scss中改成@import '~node_modules/font-awesome/scss/font-awesome'；另外，在另一个文件调用 _variables.scss 中，我必须更改 $fa-font-path: '../node_modules/font-awesome/fonts'; to $fa-font-path: '~node_modules/font-awesome/fonts';