Angular 2 - PrimeNg风格不起作用

Question

Angular 2 - PrimeNg风格不起作用

我按照说明安装了primeng,npm install primeng --save然后运行然后在app.module.ts文件中导入我需要的东西,例如:

import {CheckboxModule} from 'primeng/primeng';  

...

imports: [
    CheckboxModule,
  ],...

Run Code Online (Sandbox Code Playgroud)

然后我将样式表添加到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>

Run Code Online (Sandbox Code Playgroud)

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

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

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

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

Answer 1

小智 13

我通过rel="stylesheet" type="text/css"从 index.html 中删除来解决我的问题，并将下面的导入添加到 style.css ：

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

Run Code Online (Sandbox Code Playgroud)

Answer 2

akh*_*uri 11

自首次提出该问题（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"
            ],

Run Code Online (Sandbox Code Playgroud)

将 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");

Run Code Online (Sandbox Code Playgroud)

您也可以链接 html head 标记中的样式，但问题是没有任何工作路径/node_modules，因此实现该工作的方法是将样式（从 say /node_modules/primeng/resources/themes/saga-purple/theme.css 复制到等效路径 in/assets并在中使用该路径）链接） - 链接不起作用的可能问题/node_modules可能是因为 Angular 编译过程创建捆绑文件作为 webpack 工作流程的一部分，并且不会影响引用链接的 index.html/node_module

    <link rel="stylesheet" id="theme-link" type="text/css" href="assets/themes/saga-purple/theme.css">

Run Code Online (Sandbox Code Playgroud)

Answer 3

ToD*_*oDo 9

我发现了一个使用PrimeNg和Angular CLI 的教程,对我有用.

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

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

Answer 4

Sma*_*lns 8

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

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

Run Code Online (Sandbox Code Playgroud)

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

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

归档时间：	8 年，9 月前
查看次数：	23696 次
最近记录：	6 年，1 月前