PrimeNg не работает с файлом.scss

Я попытался настроить 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>

Моя проблема в стиле не отражается на странице и показывает следующую ошибку, когда я нажимаю на выпадающий список.

ОШИБКА TypeError: Невозможно прочитать свойство 'style' из неопределенного

Источник

1 ответ

1 - Сначала создайте проект с угловым кликом, используя sass (или настройте существующий, используя css-setup), с помощью следующей команды:

 - ng new project --style=scss

2 - Получить необходимые пакеты для работы с PrimeNg

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

3- Настройте styles.scss, импортировав необходимые CSS и 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 - При необходимости вы можете настроить переменные scss в '../node_modules/primeng/resources/themes/omega/theme.scss'. Раскрывающийся список будет скорректирован соответственно.

Здесь вы можете найти стиль выпадающего

Источник
Другие вопросы по тегам