angular - PrimeNg 不适用于 .scss 文件

Question

我已尝试将 PrimeNg 设置到我的 Angular-CLI 项目中。所以我按照

这样的步骤 npm install primeng --save
npm install primeui --save

我需要一个下拉菜单，所以我添加了

import { DropdownModule } from 'primeng/primeng';进入我的主要 module.ts 文件，然后是 imports:[DropdownModule] .

然后将样式添加到 .angular-cli.json 文件中，例如

"../node_modules/primeng/resources/themes/omega/theme.scss",
"../node_modules/primeng/resources/primeng.min.scss" .

我使用.SCSS 文件来设置样式。我已将下拉列表添加到我的 html

<p-dropdown [options]="cities1" [(ngModel)]="selectedCity1"></p-dropdown>

我的问题是样式没有反射(reflect)到页面中，当我单击下拉菜单时显示以下错误。

ERROR TypeError: Cannot read property 'style' of undefined

Answer 1

1 - 首先使用 sass(或在使用 css-setup 时调整现有项目)使用以下命令使用 angular cli 创建一个项目:

 - ng new project --style=scss

2 - 获取与 PrimeNg 一起工作所需的包

 - npm install primeng –-save
 - npm install font-awesome --save

3- 通过导入所需的 css 和 scss 调整 styles.scss

 -  @import 
    "../node_modules/font-awesome/css/font-awesome.min.css", //is used by the style of ngprime
    "../node_modules/primeng/resources/primeng.min.css", // this is needed for the structural css
    "../node_modules/primeng/resources/themes/omega/theme.scss", // this is the scss file of one of the 16 free styles of ngprime.

4 - 如果需要，您可以在“../node_modules/primeng/resources/themes/omega/theme.scss”中调整 scss 变量。下拉菜单将相应调整。

Here you can find a the style of the dropdown