'Spartacus custom styling - order of SCSS imports

I am working on custom styles for my Spartacus application and struggling with the order of the CSS rendered. Despite the order of imports in my styles.scss, my custom CSS rules are rendered in the middle of Spartacus default styling, forcing me to bump up the specificity of my rules to achieve desired results.

This is my styles.scss:

$styleVersion: 4.3;
@import '~@spartacus/styles';

@import './styles/custom/_index';

/* custom/_index.scss contains further imports of the actual styling */

and this is the snippet of the rendered CSS:

/* Spartacus defaults 
...
*/

cx-wish-list-item .cx-return-button .btn-link:hover {
  text-decoration: underline;
}

/* My custom code */

header .SiteLogo {
  width: auto;
  max-width: 150px;
}

/* Spartacus defaults continued */

cx-bulk-pricing-table table {
  text-align: center;
}

/* 
...
*/

Working with Spartacus 4.3 and Angular 12. My objective is to:

  • keep my custom code as simple and low-specificity as possible
  • be able to leverage Bootstrap and Spartacus variables and mixins in my SCSS

Is there a way to ensure my custom styles are rendered last, according to the imports order?

cssangularsassspartacus-storefront


Solution 1:[1]

In the documentation they mention wrapping custom styles in the body tag in style.scss. link here

Try wrapping your scss in the body tag. This worked for me.

body {
  cx-wish-list-item .cx-return-button .btn-link:hover {
    text-decoration: underline;
  }
  
  /* My custom code */
  
  header .SiteLogo {
    // width: auto;
    width: 150px;
  }
  
  /* Spartacus defaults continued */
  
  cx-bulk-pricing-table table {
    text-align: center;
  }
}

Solution 2:[2]

In order to control the order of styles, it is better to import the styles by yourself.

First, check the angular.json file (as there might be other Spartacus related style files) and keep only one styles file there:

"styles": [
          "src/styles.scss"
        ],

Then, in styles file import all other styles in required order, e.g.:

@import '~@spartacus/styles/index';

@import './styles/custom/_index';

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 morganm58
Solution 2 Jevgenijs Jaunslavietis

Related Questions