Proper way to use PrimeVue 3 in a Vue 3 TS/SCSS project

[chacs]

Trying to use the md-dark-indigo theme, the components (e.g. buttons) are styled but the main index.html is not (e.g. background color is still white, instead of #1e1e1e as defined in the theme).

I created a main.scss:

Code: Select all

@import "~primevue/resources/themes/md-dark-indigo/theme.css";
@import "~primevue/resources/primevue.min.css";
@import "~primeicons/primeicons.css";

and in main.ts:

Code: Select all

import './main.scss'

I think I am missing the part on how to get the :root in the theme.css applied to index.html

Code: Select all

:root {
  --surface-a:#1e1e1e;
  --surface-b:#121212;
  ...
}

Any help? Thanks in advance.