app/style
that define the main look of the application. These define global settings, such as SCSS variables (style/abstract/_variables.scss
), media query definitions (style/abstract/_media.scss
), base styling for some HTML elements (style/base
), CMS content styling (style/cms
), and more. If you want to make global styling changes to these files, you can override them.<component>.style.scss
. If you wish to completely change the look of a component, you can replace these styles with your own.styles
directory, and imported in styles/main.scss
. In order to override a base style file, you need to copy over the chain of files that is used to import it.style/abstract/_variables.scss
. Copy over this file to avoid missing any variables, and make the desired changes:_variables.scss
for the override to work. By inspecting the styling files, we can see that style/abstract/_variables.scss
is imported in style/abstract/_abstract.scss
, which is itself imported directly from style/main.scss
. Hence, we need to copy over _abstract.scss
and main.scss
to their respective directories in our theme.CategoryPaginationLink
component. All we need to do is create a stylesheet with the same path as the stylesheet from the parent theme we want to override. In this case, create a file in component/CategoryPaginationLink/CategoryPaginationLink.style.scss
with the following contents:CategoryPaginationLink
stylesheet will resolve to our custom file. Hence, our stylesheet will be the one to be included in the final CSS file, resulting in this look:MyAccountOverlay
- we want to make the text "Sign in to your account" italic..override
to the file name:.component
file, so override the .component
file of MyAccountOverlay
, by creating a file matching the original component file. We don't need to change any of the exported classes or components, so we can leave the existing exports unchanged, but we do need to add an additional import - our overridden styles: