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

Question

我有以下错误：

./src/styles.scss - 错误：模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）： 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;
}

有人可以帮忙吗？

Answer 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 目录中。