ScandiPWA organizes its styles in a structured manner for better code organization and customization. Here are the key points:

  1. Global Styles: ScandiPWA defines certain global styles that determine the overall look of your application, including theme colors, fonts, and some HTML element styling, along with CMS content styles. These are defined in SCSS in the style directory.
  2. Component Styles: Individual components have their own styles for better code organization. If you want to completely re-style an existing component in ScandiPWA, you can override its .style.scss file by creating a new file of the same path in your theme directory.

For more detailed information, you can refer to the following resources:

How to override styles?

How to use BEM?