CODEWITHSUNDEEP
angular
PedroCova
PedroCova

Reputation: 113

Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):

I have the following error:

./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleError: Module Error (from ./node_modules/postcss-loader/dist/cjs.js): /Users/pedrocovarrubias/Documents/GitHub/Angular/conFusion/node_modules/font-awesome/scss/_path.scss:6:2: Can't resolve '../node_modules/font-awesome/node_modules/font-awesome/fonts/fontawesome-webfont.eot' in '/Users/pedrocovarrubias/Documents/GitHub/Angular/conFusion/src' at Object.emitError (/Users/pedrocovarrubias/Documents/GitHub/Angular/conFusion/node_modules/webpack/lib/NormalModule.js:562:6) at Declaration (/Users/pedrocovarrubias/Documents/GitHub/Angular/conFusion/node_modules/@angular-devkit/build-angular/src/webpack/plugins/postcss-cli-resources.js:145:28) at processTicksAndRejections (internal/process/task_queues.js:95:5) at async LazyResult.runAsync (/Users/pedrocovarrubias/Documents/GitHub/Angular/conFusion/node_modules/postcss/lib/lazy-result.js:411:15) at async Object.loader (/Users/pedrocovarrubias/Documents/GitHub/Angular/conFusion/node_modules/postcss-loader/dist/index.js:97:14)

Here is my style.scss code:

/* 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;
}

Can someone help on this?

Upvotes: 4

Views: 21644

Answers (2)

aniran mohammadpour
aniran mohammadpour

Reputation: 161

For my error:

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Transform failed with 1 error:
error: Invalid version: "15.2-15.3"

I deleted mini-css-extract-plugin and @ngtool folders and ran npm i, and its working now.

Upvotes: 0

danday74
danday74

Reputation: 56966

To import from node_modules in styles.scss use the following syntax:

This line is importing from node_modules ... correct approach:

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

This line is wrong it needs to use ~ syntax:

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

Should probably be:

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

Or if that does not work import in angular.json like this:

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

Make sure to add to both "styles" properties in angular.json and to restart your dev server to pick up the changes. When importing from node_modules in this way make sure the file you are trying to import exists in your node_modules directory.

Upvotes: 0

Related Questions