Angular 2 - PrimeNg风格不起作用

时间:2017-02-02 21:08:36

标签: angular primeng

我已按照说明安装primeng,方法是运行npm install primeng --save然后在app.module.ts文件中导入我需要的内容,例如:

import {CheckboxModule} from 'primeng/primeng';  

...

imports: [
    CheckboxModule,
  ],...

然后我将样式表添加到index.html文件中:

<head>
  ...
    <link rel="stylesheet" type="text/css" href="../node_modules/primeng/resources/themes/omega/theme.css" />
    <link rel="stylesheet" type="text/css" href="../node_modules/primeng/resources/primeng.min.css" />
    <link rel="stylesheet" type="text/css" href="../node_modules/font-awesome/css/font-awesome.min.css" />
</head>

我的IDE可以找到文件位置(通过按住ctrl并单击href值),但浏览器找不到它(404错误)。

我已复制了复选框示例(http://www.primefaces.org/primeng/#/checkbox)并将其添加到我的某个组件中,但样式与普通复选框相同。

此外,不会抛出任何其他错误。

是否应将样式添加到其他文件中?我不确定为什么它不起作用。

7 个答案:

答案 0 :(得分:8)

我发现tutorial使用PrimeNg和Angular CLI,对我有用。

我将font-awesome.min.css样式表添加到index.html。

然后我想要的主题(例如"../node_modules/primeng/resources/themes/omega/theme.css",)到"styles" [...]部分中的angular-cli.json文件。

答案 1 :(得分:6)

style.css文件中,添加您的导入 例如:

 @import '../node_modules/primeng/resources/themes/omega/theme.css'

如果您已正确下载PrimeNG,它现在应该可以使用

请注意:确保您已将primeNG模块导入到正确的位置(事实上,我们导入的模块不是组件,请注意;)

答案 2 :(得分:4)

根据setup instructions,您应该使用以下内容:

<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/omega/theme.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />
<link rel="stylesheet" type="text/css" href="YOUR_PATH/font-awesome.min.css" />

注意路径以:

开头
href="/node_modules/primeng/resources/themes/omega/theme.css" 

href="../node_modules/primeng/resources/themes/omega/theme.css"

希望这有帮助! :)

答案 3 :(得分:2)

我通过从index.html中删除rel="stylesheet" type="text/css"来解决我的问题,并且还在下面的imports.css中添加了它:

@import '~primeicons/primeicons.css';
@import '~primeng/resources/themes/nova-light/theme.css';
@import '~primeng/resources/primeng.min.css';

答案 4 :(得分:1)

如果你使用cli,你在项目结构中使用了什么?你应该将它们添加到styles.css中。总的来说,他们应该进入捆绑。

答案 5 :(得分:1)

刚刚升级到PrimeNG 6.1.6并收到此错误。

看起来像此版本一样,主题已停止使用theme.css,而支持theme.scss。因此,您必须在angular.json AND的“样式”部分中引用“ node_modules / primeng / resources / themes / omega / theme.scss”(而不是“ theme.css”)。

您将需要npm重建node-sass。

答案 6 :(得分:1)

自从在2017年首次提出问题以来,primeng提供主题(免费和商业)的方式已经发生了很多变化。对于面临与2020年以上类似问题的任何人,此更新的答案。(更新对"primeng": "^10.0.0-rc.2"angular v~10.0.6有效)

基本上,有三种方法可以在primeng应用程序中导入免费的angular 2+主题。

  • primeng导入添加到angular.json样式块中
  "styles": [
              "src/styles.scss",
              "node_modules/primeicons/primeicons.css",
              "node_modules/primeng/resources/themes/saga-blue/theme.css",
              "node_modules/primeng/resources/primeng.min.css"
            ],
  • 将primeng导入添加到src/app/styles.scss文件
@import url("../node_modules/primeicons/primeicons.css");
@import url("../node_modules/primeng/resources/themes/saga-orange/theme.css");
@import url("../node_modules/primeng/resources/primeng.min.css");
  • 您还可以在html head标记中链接样式,但是问题是/node_modules的所有路径均不起作用,因此进行该工作的方法是复制样式(例如{{1 }}到/node_modules/primeng/resources/themes/saga-purple/theme.cs中的等效路径并在链接中使用该路径)-/assets链接不起作用的可能问题可能是因为角度编译过程将捆绑文件创建为webpack工作流程的一部分并且不会影响引用到/node_modules
  • 的链接的index.html
/node_module