使用'Bootstrap'主题

Question

我试图在Angular 6应用程序中更改PrimeNG主题但没有成功。

这是来自angular.json - 我正在尝试使用“Bootstrap”主题：

...
styles": [
              "node_modules/primeicons/primeicons.css",
              "node_modules/primeng/resources/themes/redmond/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
...

但主题并未改为“Bootstrap”风格：

Answer 1

PrimeNg曾经拥有一些免费主题。其中一个是Bootstrap主题。它与Bootstrap不同，但只是具有类似Bootstrap的外观，并且不需要Bootstrap作为依赖项。

在撰写此答案时，PrimeNG 6.1.0已弃用除nova主题之外的所有免费主题，其中包括三种变体nova-colored，nova-light和nova-dark。

要应用PrimeNG免费主题，只需在style.css中导入这些文件：

@import url("../node_modules/primeicons/primeicons.css");
@import url("../node_modules/primeng/resources/themes/nova-colored/theme.css");
@import url("../node_modules/primeng/resources/primeng.min.css");

stackblitz demo

在旧版本的PrimeNG 5.x中，我们可以像这样应用Bootstrap主题：

@import url("../node_modules/font-awesome/css/font-awesome.min.css");
@import url("../node_modules/primeng/resources/themes/bootstrap/theme.css");
@import url("../node_modules/primeng/resources/primeng.min.css");

更新：

在PrimeNG 6.1.0 is released之后不再维护PrimeNG旧的免费主题：

6.1之前的免费主题现已弃用，因为它们已经过时且由于其实施而难以维护，因此不再维护。随着6.1.0，无论是免费还是高级，所有主题都将由PrimeNG Theme Designer开发。这将有助于我们从中心位置维护所有主题。