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

时间:2022-07-24
本文章向大家介绍如何自定义SAP Spartacus店铺的购物车图表css风格,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

如下图所示:

打开项目文件夹下的文件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;
}

修改结果:

运行时可以看到,购物车图表的风格来自我项目里的scss文件了:

要获取更多Jerry的原创文章,请关注公众号"汪子熙":