我怎样才能粉碎Spartacus默认的scss 跳过标准组件样式覆盖组件样式规则

问题描述

我使用斯巴达克斯转盘。 我想更改轮播结构的默认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/

预先感谢您的帮助。

解决方法

您有一些选择可以覆盖样式，主要是：

1. 跳过标准组件样式，以便您介绍完整的自定义样式
2. 使用自定义规则覆盖组件样式规则

跳过标准组件样式

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

$skipComponentStyles: (cx-carousel);

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

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

覆盖组件样式规则

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

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

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