首页 文章

Angular 2 - PrimeNg风格不起作用

提问于
浏览 次
6

我按照指令安装了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）并将其添加到我的一个组件中，但样式与普通复选框相同 .

此外，不会抛出其他错误 .

样式是否应该添加到另一个文件？我不确定为什么它不起作用 .

angular primeng

5 回答

  • 1

    根据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"

    希望这可以帮助！ :)

    回复于
  • 4

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

    回复于
  • 6

    刚升级到PrimeNG 6.1.6并出现此错误 .

    看起来在这个版本中，主题已经停止使用theme.css而转向theme.scss . 因此，您必须在angular.json AND的“styles”部分中引用“node_modules / primeng / resources / themes / omega / theme.scss”（而不是“theme.css”） .

    你需要npm rebuild node-sass .

    回复于
  • 1

    我找到了一个tutorial，它使用PrimeNg和Angular CLI，对我有用 .

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

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

    回复于
  • 5

    在 style.css 文件中，添加您的导入，例如：

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

    如果您已正确下载PrimeNG，它现在应该可以正常工作

    请注意：确保您已将primeNG模块导入到正确的位置（事实上，我们导入的模块不是组件，请小心;）

    回复于

相关问题