错误:模块构建失败(从./node_modules/mini-css-extract-plugin/dist/loader.js)：

Question

我有以下错误：

./src/styles.scss -错误:模块构建失败(来自./node_modules/mini-css-extract-plugin/dist/loader.js)：加载器:模块错误(来自./节点_模块/postcss-ModuleError/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‘in (/Users/pedrocovarrubias/Documents/GitHub/Angular/conFusion/node_modules/webpack/lib/NormalModule.js:562:6) at webfont.eot (/Users/pedrocovarrubias/Documents/GitHub/Angular/conFusion/node_modules/@angular-devkit/build-angular/src/webpack/plugins/postcss-cli-resources.js:145:28) at Object.emitError (/Users/pedrocovarrubias/Documents/GitHub/Angular/conFusion/node_modules/@angular-devkit/build-angular/src/webpack/plugins/postcss-cli-resources.js:145:28) at processTicksAndRejections ( '/Users/pedrocovarrubias/Documents/GitHub/Angular/conFusion/src’/Object.emitError_processTicksAndRejections:95:5) atasync (/Users/pedrocovarrubias/Documents/GitHub/Angular/conFusion/node_modules/postcss/lib/lazy-result.js:411:15) (/Users/pedrocovarrubias/Documents/GitHub/Angular/conFusion/node_modules/postcss-loader/dist/index.js:97:14)上的async LazyResult.runAsync Object.loader

下面是我的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

要在styles.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目录中。