Блог

Я использую карусель Spartacus. Я хочу внести изменения в scss по умолчанию для структуры карусели, но я не могу настроить scss по умолчанию. Как я могу настроить scss по умолчанию в Spartacus?

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 {
      amp;.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;

        amp;: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;
          amp;.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 {
            amp;:nth-child(#{$i}) {
              transition-delay: calc(var(--cx-speed, 1) * #{$i * 0.25s});
            }
          }
        }
      }
    }
  }

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

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

    button {
      border: none;
      padding: 10px;
      margin: 0;
      transition: 0.6s all;
      background-color: transparent;
      amp;[disabled] {
        color: var(--cx-color-primary);
      }
      amp;: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;

    amp;:disabled {
      opacity: 0.5;
    }

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

Я пытаюсь настроить его таким образом:

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

Источник :

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

Заранее благодарю вас за помощь.

у вас есть несколько вариантов переопределения стилей, в основном:

1. Пропустите стандартные стили компонентов, чтобы ввести полные пользовательские стили
2. Переопределите правила стиля компонента пользовательскими правилами

Пропустить стандартные стили компонентов

Для первого варианта вы должны добавить следующее в свой styles.scss файл:

 $skipComponentStyles: (cx-carousel);
  

Вы также можете добавить cx-product-carousel в список пропущенных стилей компонентов. Добавив эти стили компонентов, конечные стили исключат стили из конечного файла css для данного компонента.

Пожалуйста, обратите внимание, что переменная scss должна быть вставлена перед импортом стилей витрины.

Переопределить правила стиля компонента

Для 2-го варианта вы должны сохранить существующие стили и дополнительно изменить правила. Вы должны использовать селектор компонентов, чтобы обеспечить инкапсуляцию стилей в приложении. Вот пример:

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

Пожалуйста, обратите внимание, что пользовательские scss должны быть вставлены после импорта стилей витрины.