How can I crush Spartacus default scss

Question

I use Spartacus carousel. I want to make changes in the default scss for the carousel structure,but I can't customize the default scss. How can I customize the default scss in Spartacus?

Default scss:

%cx-carousel {
  display: flex;
  flex: 100%;
  --cx-speed: 0.5;
  flex-direction: column;

  > h3 {
    @include type('3');
    font-weight: bold;
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 1rem;
    @include media-breakpoint-up(xl) {
      margin-bottom: 3rem;
    }
  }

  .carousel-panel {
    display: flex;
    justify-content: space-between;

    // The size of carousel items depends on the number of items per slide.
    // We generate 10 sizes in case there are a lot of carousel items displayed
    // on a single slide.
    @for $i from 1 through 10 {
      &.size-#{$i} .item {
        flex: 0 0 calc((100 / #{$i}) * 1%);
      }
    }

    .slides {
      flex: auto;
      position: relative;

      .slide {
        transition: 0.6s all;
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;

        &:not(.active) {
          // we keep the active slide non-absolute, so the height
          // of the parent is based on the displayed slide
          position: absolute;
          opacity: 0;
          z-index: -1;
          transition: none;
        }

        .item {
          opacity: 0;
          z-index: -1;
          &.active {
            opacity: 1;
            z-index: 1;
          }
          transition: 0.4s all;

          // we add a transition delay so that items are nicely animated in a sequence
          @for $i from 1 through 4 {
            &:nth-child(#{$i}) {
              transition-delay: calc(var(--cx-speed, 1) * #{$i * 0.25s});
            }
          }
        }
      }
    }
  }

  button {
    &:focus {
      outline: none;
    }
    color: var(--cx-color-light);
    &:not(:disabled) {
      cursor: pointer;
    }
  }

  .indicators {
    display: flex;
    justify-content: center;

    button {
      border: none;
      padding: 10px;
      margin: 0;
      transition: 0.6s all;
      background-color: transparent;
      &[disabled] {
        color: var(--cx-color-primary);
      }
      &:not(:disabled):hover {
        color: var(--cx-color-secondary);
      }
    }

    @include media-breakpoint-only(xs) {
      display: none;
    }
  }

  .previous,
  .next {
    background-color: transparent;
    border: none;
    font-size: 2rem;

    &:disabled {
      opacity: 0.5;
    }

    &:not(:disabled):hover {
      color: var(--cx-color-primary);
    }
  }
}

I am trying to customize it this way:

cx-carousel 
{
  @extend %cx-carousel !optional;
  .carousel-panel {
    .slides {
      
      .slide {
        display: webkit-inline-box;;
      }
    }
  }
}

Source :

https://sap.github.io/spartacus-docs/css-architecture/

Thank you in advance for your help.

Answer 1

you have a few options to override the styles, mainly:

1. Skip the standard component styles, so that you introduce complete custom styles
2. Override component style rules with custom rules

Skip standard component styles

For the first option, you would add the following in your styles.scss file:

$skipComponentStyles: (cx-carousel);

You can also add cx-product-carousel to the list of skipped component styles. By adding those components styles, the final styles will exclude styles from the final css file for the given component.

Please note that the scss variable must be inserted before you import the storefront styles.

Override component style rules

For the 2nd option, you would keep the existing styles, and further amend the rules. You should use the component selector to ensure encapsulation of styles cross the app. Here's an example:

cx-carousel {
  border: solid 1px rebeccapurple;
}

Please note that the custom scss should be inserted after you import the storefront styles.