0

I am using Angular 8 with angular material, though I have imported angular material css in styles.css that is included in angular.json but still Angular material CSS is not loading on my component (component is lazy loaded )

Its my angular.json code you can check I have included styles.css

     {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "apexx-portal-ui": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/apexx-portal-ui",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/@fortawesome/fontawesome-free/css/all.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "node_modules/@fortawesome/fontawesome-free/js/all.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "apexx-portal-ui:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "apexx-portal-ui:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "apexx-portal-ui:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "apexx-portal-ui-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "apexx-portal-ui:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "apexx-portal-ui:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "apexx-portal-ui"
}

this is my styles.css code where import for indigo-pink.css is done

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/ag-grid-community/dist/styles/ag-grid.css";
@import "../node_modules/ag-grid-community/dist/styles/ag-theme-balham.css";

/* angular Material theme import */
@import "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css";

@import './assets/styles/alertify.core.css';
@import './assets/styles/alertify.bootstrap.css';

Please suggest me what I am missing

3
  • check your style.css file maybe it is .scss file and you are giving wrong extension. Commented Nov 1, 2019 at 11:40
  • Did you find the solution? Commented Sep 29, 2020 at 8:48
  • You can check the following answer too. stackoverflow.com/a/62259528/3660648 Commented Jul 1, 2021 at 11:57

1 Answer 1

1

Correct way to import angular material styles is

styles.css:

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

Try it out!

Sign up to request clarification or add additional context in comments.

1 Comment

My styles.css is under src folder and For me path is @import '../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css'; But its not loading CSS on front.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.