title: Styles are not loading from styles.css after upgrading Angular 5 app to Angular 7
body: <p>I have upgraded angular 5 app to angular 7 and styling got messed up. When I inspect the elements in the console, these elements' styles are not loading from styles.bundles.css. Now these styles are loading from reboot.scss, site.scss. However in Angular 5 app these styles were loading from styles.bundles.css. </p>
  
  <p>package.json: </p>
  
  <pre><code>{
    "name": "wigs",
    "version": "0.0.0",
    "license": "MIT",
    "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "build": "ng build --prod --output-hashing=none",
      "test": "ng test",
      "lint": "ng lint",
      "e2e": "ng e2e",
      "build:dev": "ng build --extract-css=true --aot=true --build-optimizer=true --output-hashing=none"
    },
    "private": true,
    "dependencies": {
      "@angular/animations": "7.2.11",
      "@angular/common": "7.2.11",
      "@angular/compiler": "7.2.11",
      "@angular/core": "7.2.11",
      "@angular/forms": "7.2.11",
      "@angular/http": "7.2.11",
      "@angular/platform-browser": "7.2.11",
      "@angular/platform-browser-dynamic": "7.2.11",
      "@angular/router": "7.2.11",
      "@ng-bootstrap/ng-bootstrap": "^4.2.2",
      "@progress/kendo-angular-buttons": "^4.3.3",
      "@progress/kendo-angular-dateinputs": "^3.7.1",
      "@progress/kendo-angular-dropdowns": "^3.5.2",
      "@progress/kendo-angular-excel-export": "^2.3.0",
      "@progress/kendo-angular-grid": "^3.13.1",
      "@progress/kendo-angular-inputs": "^4.2.0",
      "@progress/kendo-angular-intl": "^1.7.0",
      "@progress/kendo-angular-l10n": "^1.3.0",
      "@progress/kendo-data-query": "^1.5.1",
      "@progress/kendo-drawing": "^1.5.9",
      "@progress/kendo-theme-default": "^3.4.0",
      "angular-auth-oidc-client": "9.0.3",
      "angular-font-awesome": "^3.1.2",
      "bootstrap": "4.3.1",
      "core-js": "3.0.0",
      "css-vars-ponyfill": "^2.0.2",
      "font-awesome": "^4.7.0",
      "intl": "^1.2.5",
      "jquery": "^3.4.1",
      "ngx-bootstrap": "4.3.0",
      "node-sass": "4.10.0",
      "popper.js": "1.14.7",
      "primeicons": "1.0.0",
      "primeng": "7.1.0",
      "rxjs": "6.4.0",
      "rxjs-compat": "6.4.0",
      "rxjs-websockets": "6.0.4",
      "tslib": "^1.9.0",
      "web-animations-js": "2.3.1",
      "zone.js": "0.8.29"
    },
    "devDependencies": {
      "@angular/compiler-cli": "7.2.11",
      "@angular-devkit/build-angular": "~0.13.0",
      "typescript": "3.2.4",
      "@angular/cli": "7.3.7",
      "@angular/language-service": "7.2.11",
      "@types/jasmine": "3.3.11",
      "@types/jasminewd2": "2.0.6",
      "@types/node": "11.11.3",
      "codelyzer": "4.5.0",
      "jasmine-core": "3.3.0",
      "jasmine-spec-reporter": "4.2.1",
      "karma": "4.0.1",
      "karma-chrome-launcher": "2.2.0",
      "karma-coverage-istanbul-reporter": "2.0.5",
      "karma-jasmine": "2.0.1",
      "karma-jasmine-html-reporter": "1.4.0",
      "protractor": "5.4.2",
      "ts-node": "8.0.3",
      "tslint": "5.14.0"
    }
  }
  
  </code></pre>
  
  <p>angular.json:</p>
  
  <pre><code>"styles": [
                "node_modules/bootstrap/dist/css/bootstrap.min.css",
                "src/styles.scss",
                "node_modules/font-awesome/css/font-awesome.css"
              ],
  </code></pre>