我正在尝试在我的项目中使用登录页面、卡片等星云组件，但由于某种原因，当我这样做时，即使我没有修改登录页面的任何 html 或 css，登录页面似乎也有点奇怪。
这是我的应用程序模块：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import { FooterComponent } from './footer/footer.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { FormsComponent } from './forms/forms.component';
import { ButtonsComponent } from './buttons/buttons.component';
import { TablesComponent } from './tables/tables.component';
import { TypographyComponent } from './typography/typography.component';
import { IconsComponent } from './icons/icons.component';
import { AlertsComponent } from './alerts/alerts.component';
import { AccordionsComponent } from './accordions/accordions.component';
import { BadgesComponent } from './badges/badges.component';
import { ProgressbarComponent } from './progressbar/progressbar.component';
import { BreadcrumbsComponent } from './breadcrumbs/breadcrumbs.component';
import { PaginationComponent } from './pagination/pagination.component';
import { DropdownComponent } from './dropdown/dropdown.component';
import { TooltipsComponent } from './tooltips/tooltips.component';
import { CarouselComponent } from './carousel/carousel.component';
import { TabsComponent } from './tabs/tabs.component';
import { NbAuthModule, NbPasswordAuthStrategy, NbAuthJWTToken } from '@nebular/auth';
import { NbThemeModule } from '@nebular/theme';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent,
NavbarComponent,
SidebarComponent,
FooterComponent,
DashboardComponent,
FormsComponent,
ButtonsComponent,
TablesComponent,
TypographyComponent,
IconsComponent,
AlertsComponent,
AccordionsComponent,
BadgesComponent,
ProgressbarComponent,
BreadcrumbsComponent,
PaginationComponent,
DropdownComponent,
TooltipsComponent,
CarouselComponent,
TabsComponent
],
imports: [
BrowserModule,
HttpClientModule,
RouterModule,
AppRoutingModule,
FormsModule,
NgbModule,
NbThemeModule.forRoot(),
NbAuthModule.forRoot({
strategies: [
NbPasswordAuthStrategy.setup({
name: 'email',
baseEndpoint: 'http://localhost:8082',
token: {
class: NbAuthJWTToken,
key: 'token',
},
login: {
endpoint: '/auth/signin',
method: 'post',
},
register: {
endpoint: '/registration',
method: 'post',
},
logout: {
endpoint: '/auth/sign-out',
method: 'post',
},
requestPass: {
endpoint: '/auth/request-pass',
method: 'post',
},
resetPass: {
endpoint: '/auth/reset-pass',
method: 'post',
},
}),
],
forms: {
login: {
redirectDelay: 0,
showMessages: {
success: true,
},
},
register: {
redirectDelay: 0,
showMessages: {
success: true,
},
},
requestPassword: {
redirectDelay: 0,
showMessages: {
success: true,
},
},
resetPassword: {
redirectDelay: 0,
showMessages: {
success: true,
},
},
logout: {
redirectDelay: 0,
},
},
}),
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
这是我的路由模块：
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { FormsComponent } from './forms/forms.component';
import { ButtonsComponent } from './buttons/buttons.component';
import { TablesComponent } from './tables/tables.component';
import { IconsComponent } from './icons/icons.component';
import { TypographyComponent } from './typography/typography.component';
import { AlertsComponent } from './alerts/alerts.component';
import { AccordionsComponent } from './accordions/accordions.component';
import { BadgesComponent } from './badges/badges.component';
import { ProgressbarComponent } from './progressbar/progressbar.component';
import { BreadcrumbsComponent } from './breadcrumbs/breadcrumbs.component';
import { PaginationComponent } from './pagination/pagination.component';
import { DropdownComponent } from './dropdown/dropdown.component';
import { TooltipsComponent } from './tooltips/tooltips.component';
import { CarouselComponent } from './carousel/carousel.component';
import { TabsComponent } from './tabs/tabs.component';
import { NbAuthComponent, NbRegisterComponent, NbLogoutComponent, NbRequestPasswordComponent, NbResetPasswordComponent, NbLoginComponent } from '@nebular/auth';
const routes: Routes = [
{ path: 'dashboard', component: DashboardComponent },
{ path: 'forms', component: FormsComponent },
{ path: 'buttons', component: ButtonsComponent },
{ path: 'tables', component: TablesComponent },
{ path: 'icons', component: IconsComponent },
{ path: 'typography', component: TypographyComponent },
{ path: 'alerts', component: AlertsComponent },
{ path: 'accordions', component: AccordionsComponent },
{ path: 'badges', component: BadgesComponent },
{ path: 'progressbar', component: ProgressbarComponent },
{ path: 'breadcrumbs', component: BreadcrumbsComponent },
{ path: 'pagination', component: PaginationComponent },
{ path: 'dropdowns', component: DropdownComponent },
{ path: 'tooltips', component: TooltipsComponent },
{ path: 'carousel', component: CarouselComponent },
{ path: 'tabs', component: TabsComponent },
{
path: 'auth',
component: NbAuthComponent,
children: [
{
path: '',
component: NbLoginComponent,
},
{
path: 'login',
component: NbLoginComponent,
},
{
path: 'register',
component: NbRegisterComponent,
},
{
path: 'logout',
component: NbLogoutComponent,
},
{
path: 'request-password',
component: NbRequestPasswordComponent,
},
{
path: 'reset-password',
component: NbResetPasswordComponent,
},
],
},
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
错误：
./src/app/app.component.scss 中的错误模块构建失败（来自 ./node_modules/sass-loader/lib/loader.js）：
未定义 ^ 在 C:\Users\Adam\Downloads\Compressed\StarAdmin-Free-Angular-Admin-Template-master\node_modules@nebular\theme\styles_globals.scss 中没有名为 nb-install-global 的 mixin（第 17 行，第 12 列）
./src/styles.scss 中的错误 (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src ??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss) 模块构建失败（来自 ./node_modules/sass-loader/lib/loader .js）：
未定义 ^ 在 C:\Users\Adam\Downloads\Compressed\StarAdmin-Free-Angular-Admin-Template-master\node_modules@nebular\theme\styles_globals.scss 中没有名为 nb-install-global 的 mixin（第 17 行，第 12 列）
./src/app/navbar/navbar.component.scss 中的错误模块构建失败（来自 ./node_modules/sass-loader/lib/loader.js）：
未定义 ^ 在 C:\Users\Adam\Downloads\Compressed\StarAdmin-Free-Angular-Admin-Template-master\node_modules@nebular\theme\styles_globals.scss 中没有名为 nb-install-global 的 mixin（第 17 行，第 12 列）
./src/app/sidebar/sidebar.component.scss 中的错误模块构建失败（来自 ./node_modules/sass-loader/lib/loader.js）：
未定义 ^ 在 C:\Users\Adam\Downloads\Compressed\StarAdmin-Free-Angular-Admin-Template-master\node_modules@nebular\theme\styles_globals.scss 中没有名为 nb-install-global 的 mixin（第 17 行，第 12 列）
./src/app/footer/footer.component.scss 中的错误模块构建失败（来自 ./node_modules/sass-loader/lib/loader.js）：
未定义 ^ 在 C:\Users\Adam\Downloads\Compressed\StarAdmin-Free-Angular-Admin-Template-master\node_modules@nebular\theme\styles_globals.scss 中没有名为 nb-install-global 的 mixin（第 17 行，第 12 列）
./src/app/dashboard/dashboard.component.scss 中的错误模块构建失败（来自 ./node_modules/sass-loader/lib/loader.js）：
未定义 ^ 在 C:\Users\Adam\Downloads\Compressed\StarAdmin-Free-Angular-Admin-Template-master\node_modules@nebular\theme\styles_globals.scss 中没有名为 nb-install-global 的 mixin（第 17 行，第 12 列）