我怎样才能粉碎斯巴达克斯默认的 scss

Question

我使用斯巴达克斯旋转木马。我想更改轮播结构的默认 scss，但我无法自定义默认 scss。如何自定义 Spartacus 中的默认 scss？

默认 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);
    }
  }
}

我正在尝试以这种方式自定义它：

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

来源：

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

提前感谢您的帮助。

Answer 1

您有几个选项可以覆盖样式，主要是：

跳过标准组件样式，让您引入完整的自定义样式
用自定义规则覆盖组件样式规则

跳过标准组件样式

对于第一个选项，您需要在 styles.scss 文件中添加以下内容：

$skipComponentStyles: (cx-carousel);

您还可以将 cx-product-carousel 添加到跳过的组件样式列表中。通过添加这些组件样式，最终样式将从给定组件的最终 css 文件中排除样式。

请注意必须在导入店面样式之前插入 scss 变量。

覆盖组件样式规则

对于第二个选项，你会保留现有的样式，并进一步修改规则。您应该使用组件选择器来确保跨应用程序封装样式。这是一个例子：

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

请注意应插入自定义 scss在您导入店面样式后。

我怎样才能粉碎斯巴达克斯默认的 scss

How can I crush Spartacus default scss

css

customization

carousel

scss-mixins

spartacus-storefront

跳过标准组件样式

覆盖组件样式规则