如何自定义SAP Spartacus店铺的购物车图表css风格

Jerry Wang

发布于 2020-09-02 08:59:34

5130

发布于 2020-09-02 08:59:34

文章被收录于专栏：Jerry的SAP技术分享Jerry的SAP技术分享

如下图所示：

打开项目文件夹下的文件style.scss: 将如下代码粘贴进去：

/* You can add global styles to this file, and also import other style files */

$styleVersion: 2.1;
@import '~@spartacus/styles/index';

:root {
    --cx-color-primary: blue;
    --cx-color-secondary: green;
}

$skipComponentStyles: (cx-mini-cart);

%jerry-custom-mini-cart {
    a {
        color: black;
        position: relative;
        display: block;
        .count {
            border: solid 2px var(--cx-color-dark);
            background: var(--cx-color-primary);
            border-radius: 5px;
            width: 20px;
            height: 20px;
            display: flex;
            position: absolute;
            justify-content: center;
            align-items: center;
            top: -10px;
            right: -10px;
        }
        .total {
            display: none;
        }
    }
}
cx-mini-cart {
    @extend %jerry-custom-mini-cart !optional;
}

修改结果: