Проблема со стилем PrimeNG при использовании CSS-файла темы с импортом, а не с внедрением ⇐ CSS

[Anonymous]

Когда я использую темы Primeng путем внедрения таблиц стилей в angular.json, я получаю искомый результат, показанный ниже.

Код: Выделить всё

"styles": [
"src/styles.css",
"node_modules/primeng/resources/themes/lara-dark-blue/theme.css",
"node_modules/primeng/resources/primeng.min.css"
]

Когда Я не внедряю темы, а помещаю их в файл theme-dark.css, который затем связываю с index.html. Я получаю другой результат с отсутствующими стилями...

Код: Выделить всё

"styles": [
"src/styles.css",
{
"input": "src/assets/themes/theme-light.css",
"bundleName": "theme-light",
"inject": false
},
{
"input": "src/assets/themes/theme-dark.css",
"bundleName": "theme-dark",
"inject": false
}
]

Файл theme-dark.css содержит следующее:

Код: Выделить всё

@import "primeng/resources/themes/lara-dark-blue/theme.css";
@import "primeng/resources/primeng.css";

Вот мой файл Styles.css, поскольку я также использую Tailwind:

Код: Выделить всё

@import "primeflex/primeflex.min.css";
@import "primeicons/primeicons.css";

@layer tailwind-base, primeng, tailwind-utilities;

@layer tailwind-base {
@tailwind base;
}

@layer tailwind-utilities {
@tailwind components;
@tailwind utilities;
}

p-password.w-full {
.p-password, .p-password-mask, .p-password-input {
width: 100%;
display: block;
}
}

.dark-toggle.p-inputswitch {
.p-inputswitch-slider::before {
margin-top: -12px;
background: transparent;
content: "🌞";
}
}
.dark-toggle.p-inputswitch-checked .p-inputswitch-slider::before {
content: "🌚";
}

По сути, мне нужны результаты первого изображения, но без внедрения стилей. внутри angular.json, поэтому темы грунтовки и цвета можно менять на лету...

Подробнее здесь: https://stackoverflow.com/questions/791 ... -injection