Error importing angular material 6 custom theme in styles.css

Question

I created a custom theme using Angular Material 6. When I import the theme in styles.css I get the error:

./src/styles.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./src/styles.css) Module build failed: Error: Can't resolve '@angular/material/theming' in 'C:\Users\D3L1ghT\Documents\PROJECTS\social-network\techhub\src'

Here is my code for my-theme.scss:

@import "~@angular/material/theming";

@include mat-core();

$my-theme-primary: mat-palette($mat-custom-blue, 400);
$my-theme-accent: mat-palette($mat-custom-blue, A100, A100, A400);

$my-theme: mat-light-theme($my-theme-primary, $my-theme-accent);

$primary-color: map_get($my-theme-primary, 400);
$secondary-color: map_get($my-theme-accent, 500);

@include angular-material-theme($my-theme);

Here is the code for styles.css:

/* @import "~@angular/material/prebuilt-themes/indigo-pink.css"; */
@import url("./my-theme.scss");

This is a screenshot of angular.json: angular.json

Answer 1

I was able to fix the issue by uninstalling my current nodejs and installing the latest version 8.11.3 and everything worked fine. I didn't have to import in styles.css anymore as learnt from the link @Und3rTow posted. Also, I no longer used input in angular.json @pardeep-jain. Thanks guys

Answer 2

You should not add your theme.scss file inside the css file.

Follow these steps:

1. (Optional) Delete default theme in file src/styles.css:

   @import '~@angular/material/prebuilt-themes/the-default-theme.css';
   

2. Create a file theme.scss inside src folder.

3. Open file angular.json (or angular-cli.json) inside your root folder

4. Add your theme "src/theme.scss" into the styles array:

   "projects": {
     "your-app": {
       ...
       "architect": {
         "build": {
           ...
           "options": {
             ...
             "styles": [
               "src/styles.css",
               "src/theme.scss"
             ],
           },
         },
       },
     },
   }
   

5. Restart the app.

Further links:

• Theming Guideline from material.angular.io