使用'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");

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

@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主题设计器开发。这将帮助我们从一个中心位置维护所有主题。