Search code examples
spartacus-storefront

Disable Spartacus component styles

The documentation states that that component styles can be skipped

Skipping Specific Component Styles Component styles are optional, because they are pulled in from the style library. Therefore, you might want to disable some standard component styles entirely. To disable standard component styles, you can add the component selectors to the $skipComponentStyles list. The following is an example that demonstrates skipping two standard components from the style library:

$skipComponentStyles: (cx-product-carousel, cx-searchbox);

$skipComponentStyles: (cx-product-carousel, cx-searchbox); Skipping specific component styles might be beneficial if you need to create styles from scratch and do not want to override specific style rules coming from the Spartacus style library.

Where should this be done? I can't get that from the documentation. My first guess should be the global style.scss but for example the following does not work:

@import '~@spartacus/styles/index';
$skipComponentStyles: (header, cx-media, cx-banner, cx-category-navigation);
Solution

  • You're almost right, you just need to swap the 2 lines. The sass variable will be used inside the import of the Spartacus styles, otherwise the variable defaults to an empty var. so, the following will work: 

    $skipComponentStyles: (header, cx-media, cx-banner, cx-category-navigation);
@import '~@spartacus/styles/index';