CODEWITHSUNDEEP
cssangularsassspartacus-storefront
Anka S
Anka S

Reputation: 11

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:

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

Upvotes: 1

Views: 718

Answers (2)

Jevgenijs Jaunslavietis
Jevgenijs Jaunslavietis

Reputation: 173

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';

Upvotes: 1

morganm58
morganm58

Reputation: 11

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;
  }
}

Upvotes: 1

Related Questions