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

Question

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

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