Prime Community Forum

Can someone please help me with the structure of this theme - the CSS structure. What css is for what . There are these many files for css . What is responsible for what in this theme ?

assets/theme/<various-themes>.scss
assets/theme/<various-themes>.css
assets/sass/fonts.scss
assets/sass/mixins.scss
assets/sass/variables.scss
assets/sass/theme/common.scss , data, forms, icons, menu etc....
assets/sass/overrides/layout_styles.scss , layout_variable.scss, theme_styles.scss, theme_variables.scss
assets/sass/layout/compact,dashboard,exception ......etc
assets/layout/css/<various> css



and there is no reference to any of this in the styles.scss file. Instead the css files are referenced in index.html. What is the need to reference a css file in an index file in an angular app ?

Added to this there are styles written in individual components ?

Is there a document that provides the details of the structure of the css ?

Why no answer to this one ?

- assets/theme/<various-themes>.scss
Color file of a theme like blue, orange which defines the primary color and imports the theme core.

- assets/theme/<various-themes>.css
Generated CSS from sass for the same

- assets/sass/fonts.scss
Imports the font file

- assets/sass/mixins.scss
Reusable utilities like animation, gradients, effects

- assets/sass/variables.scss
Global variables like font-size

- assets/sass/theme/common.scss , data, forms, icons, menu etc....
Core theme files for the PrimeNG UI Components.

- assets/sass/overrides/layout_styles.scss , layout_variable.scss, theme_styles.scss,
Optional files to put write your extensions for ease of migration, these are empty files.

- assets/sass/layout/compact,dashboard,exception ......etc
Styling of utility pages like dashboard, login, error

- assets/layout/css/<various> css
Generated css file of a layout color file such as blue, green, orange