Как исправить: изменил мой угловой проект на SCSS - теперь компоненты не отображаются

Question

Я пытаюсь интегрировать MdBootstrap с моим текущим приложением Angular, которое использует обычный CSS.Я следовал их руководству по быстрому запуску / установке здесь: https://mdbootstrap.com/docs/angular/getting-started/quick-start/

Теперь мои компоненты не будут отображаться.Компиляция завершается успешно, но все, что я получаю, это пустой экран (с фиолетовым фоном благодаря моему src / styles.scss).

https://i.imgur.com/h34Blyl.png

Вот мой angular.json:

"schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/esports-platform-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
              "node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss",
              "node_modules/angular-bootstrap-md/assets/scss/mdb.scss",
              "node_modules/animate.css/animate.css",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/chart.js/dist/Chart.js",
              "node_modules/hammerjs/hammer.min.js"
            ]
          },

А вот мой app.component.html:

<app-home></app-home>
<router-outlet></router-outlet>

А вот HTML-код моего HomeComponent:

<app-main id="mainDisplay" class="hidden" [userLoggedIn]="userLoggedIn"></app-main>


<app-login id="loginDisplay" [userLoggedIn]="userLoggedIn"></app-login>

РЕДАКТИРОВАТЬ :Вот мой side-nav.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-side-nav',
    templateUrl: './side-nav.component.html',
    styleUrls: [ './side-nav.component.scss' ]
})
export class SideNavComponent implements OnInit {
    constructor() {}

    ngOnInit() {}
}

А вот мой side-nav.component.html:

<!-- SideNav slide-out button -->
<a (click)="sidenav.toggle()" mdbBtn color="primary" class="p-3 button-collapse"><mdb-icon fas icon="bars"></mdb-icon></a>
<!--/. SideNav slide-out button -->

<!-- Sidebar navigation -->
<mdb-side-nav #sidenav class="fixed" [fixed]="true">
  <!-- Logo -->
  <li>
    <div class="logo-wrapper waves-light">
      <a href="#"><img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" class="img-fluid flex-center"></a>
    </div>
  </li>
  <!--/. Logo -->
  <!--Social-->
  <li>
    <ul class="social">
      <li><a class="icons-sm fb-ic"><mdb-icon fab icon="facebook-f"> </mdb-icon></a></li>
      <li><a class="icons-sm pin-ic"><mdb-icon fab icon="pinterest"> </mdb-icon></a></li>
      <li><a class="icons-sm gplus-ic"><mdb-icon fab icon="google-plus"> </mdb-icon></a></li>
      <li><a class="icons-sm tw-ic"><mdb-icon fab icon="twitter"> </mdb-icon></a></li>
    </ul>
  </li>
  <!--/Social-->
  <!--Search Form-->
  <li>
    <form class="search-form" role="search">
      <div class="form-group md-form waves-light" mdbWavesEffect>
        <input type="text" class="form-control" placeholder="Search">
      </div>
    </form>
  </li>
  <!--/.Search Form-->
  <!-- Side navigation links -->
  <li>
    <ul class="collapsible collapsible-accordion">
      <mdb-accordion [multiple]="false" aria-multiselectable="false">

        <!-- Collapsible link -->
        <mdb-accordion-item>
          <mdb-accordion-item-head mdbWavesEffect><mdb-icon fas icon="chevron-right"></mdb-icon> Collapsible menu
          </mdb-accordion-item-head>
          <mdb-accordion-item-body>
            <ul>
              <li><a href="#" mdbWavesEffect>Link 1</a></li>
              <li><a href="#" mdbWavesEffect>Link 2</a></li>
            </ul>
          </mdb-accordion-item-body>
        </mdb-accordion-item>

        <!-- Simple link -->
        <mdb-accordion-item class="no-collase">
          <mdb-accordion-item-head mdbWavesEffect><mdb-icon far icon="hand-pointer"></mdb-icon> Simple link
          </mdb-accordion-item-head>
          <mdb-accordion-item-body></mdb-accordion-item-body>
        </mdb-accordion-item>

        <!-- Collapsible link -->
        <mdb-accordion-item>
          <mdb-accordion-item-head mdbWavesEffect><mdb-icon far icon="eye"></mdb-icon> Collapsible menu 2
          </mdb-accordion-item-head>
          <mdb-accordion-item-body>
            <ul>
              <li><a href="#" mdbWavesEffect>Link 1</a></li>
              <li><a href="#" mdbWavesEffect>Link 2</a></li>
            </ul>
          </mdb-accordion-item-body>
        </mdb-accordion-item>

        <!-- Simple link -->
        <mdb-accordion-item class="no-collase">
          <mdb-accordion-item-head mdbWavesEffect><mdb-icon far icon="gem"></mdb-icon> Simple link 2</mdb-accordion-item-head>
          <mdb-accordion-item-body></mdb-accordion-item-body>
        </mdb-accordion-item>

      </mdb-accordion>
    </ul>
  </li>
  <!--/. Side navigation links -->
  <div class="sidenav-bg mask-strong"></div>
</mdb-side-nav>
<!--/. Sidebar navigation -->

Любая помощь будет принята с благодарностью.Почему мой компонент входа в систему не появляется после перехода на SCSS из CSS?