Javascript 如何修复：将我的角度项目更改为SCSS-现在没有组件渲染

我正在尝试将MdBootstrap与当前使用常规CSS的Angular应用程序集成。我遵循了他们的快速入门/安装指南：

现在，我的组件不会渲染。编译成功了，但我得到的只是一个空白屏幕（由于我的src/styles.scss，背景为紫色）

这是我的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：

简单链接
可折叠菜单2




简单链接2

---

任何帮助都将不胜感激。为什么我的登录组件在从CSS切换到SCSS后没有出现

consoleWow中是否有任何错误，是的，当我使用谷歌Chrome检查时也有错误。看起来很多都来自我在sidenav组件中添加的mdb标记我从sidenav中删除了所有html我的组件再次激活了！但是我希望能够使用mdb标签。。。我已导入MDBBootstrapModule.forRoot（）。。。不确定为什么它不会编译。很难猜测问题的匹配，请共享用于配置组件的错误或代码。@nidhenjoseph我编辑了该问题，以获得component.ts和.html