Angular & PrimeNG：没有让 CSS 工作

Question

我开始使用 PrimeNG，但我不了解很酷的样式。但我没有看到 ng serve 或浏览器日志中的错误。

组件（我有一个日历和 3 个按钮）出现了，但看起来很呆板。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { CalendarModule } from 'primeng/calendar';
import { ButtonModule } from 'primeng/button';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, BrowserAnimationsModule, FormsModule, CalendarModule, ButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import {CalendarModule} from 'primeng/calendar';
import {ButtonModule} from 'primeng/button';

@Component({
  selector: 'app-root',

  styleUrls: [
  "../../node_modules/primeicons/primeicons.css",
  "../../node_modules/primeng/resources/themes/nova-light/theme.css",
  "../../node_modules/primeng/resources/primeng.min.css"],
  template: `

<p-calendar [(ngModel)]="value" [disabledDays]="[0,6]" showButtonBar="true"></p-calendar>
<p>
<button pButton type="button" label="Click1" ></button>
<p>
<p-button label="Click2" ></p-button>
<p>
<button pButton type="button" label="Success" class="ui-button-rounded ui-button-success"></button>
`
})
export class AppComponent {
  title = 'ngtest';

    value : Date;
}

知道我遗漏了什么吗？谢谢！

Answer 1

你从可能无法实现的组件中导入了primengcss的节点模块

尝试将 angular.json 文件中的节点模块添加到样式数组中，如下所示

"style":[
"./node_modulesnode_modules/primeng/resources/themes/nova-light/theme.css"

// Like this add all the css modules links here then try
],

Angular & PrimeNG：没有让 CSS 工作

Angular & PrimeNG: Not getting the CSS to work

primeng

angular