使用“引导程序”主题

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