Search code examples
spartacus-storefront

Spartacus 4 - How to extend default Storefront theme?

I tried basic primary color change in Spartacus 4.0.1 but it seems to be overwritten by the default styling. Followed the guide: https://sap.github.io/spartacus-docs/css-architecture/

Is there a work around for this or is it fixed in newer versions?

Here's my code mystore/src/styles.scss:

$primary: green;
$font-weight-normal: 600;

$styleVersion: 4.0;
@import "~@spartacus/styles/index";

:root {
    --cx-color-primary: green;
}

screenshot showing my style is being overwritten

Solution

  • I've had the same problem today. Have a look inside your angular.json file inside the root folder. There is a section that defines the styles that are loaded. For me this looked something like this:

    "styles": [
   "src/styles.scss"
   "src/styles/spartacus/user.scss",
   "src/styles/spartacus/organization.scss",
   "src/styles/spartacus/checkout.scss",
   "src/styles/spartacus/cart.scss",
],

    I noticed that inside the user.scss and all other imports the standard @spartacus/styles library is imported at the top. So everything you do in your styles.scss is overwritten again by these imports.

    My approach for now was to put the styles.scss at the end. So nothing is overwritten.

    "styles": [
  "src/styles/spartacus/user.scss",
  "src/styles/spartacus/organization.scss",
  "src/styles/spartacus/checkout.scss",
  "src/styles/spartacus/cart.scss",
  "src/styles.scss"
],

    To me it seems like a bug that the order is like this. Might report it later.