如何自定义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的原创文章，请关注公众号"汪子熙":

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

如何自定义SAP Spartacus店铺的界面颜色风格
SAP Spartacus电商页面默认的颜色风格: 注意下图红色高亮部分的颜色风格: 在项目文件夹的style.scss里,添加如下代码片段: :root {--cx-color-primary: b ...
使用Angular依赖注入自定义SAP Spartacus的ProductAdapter
新建一个MyProductAdapter,继承自SAP Spartacus的ProductAdapter,返回一些fake数据: import { Injectable } from '@angula ...
自定义SAP Spartacus的产品搜索API参数 - Product Search
SAP Spartacus默认采用的产品搜索url配置在这个文件里: C:\Code\SPA\spartacus\projects\core\src\occ\adapters\product\defa ...
自定义SAP Spartacus Cart界面
文件目录:@Spartacus-storefront: 把这个B2cStorefrontModule改成StorefrontModule,因为后者不会提供一些default配置,所以运行时会有很多关于 ...
如何自定义SAP Spartacus的路由路径
地址:https://stackoverflow.com/questions/65830446/customise-spartacus-cart-path 以chart为例: By default i ...
如何自定义SAP Spartacus 产品明细的url pattern
在Spartacus源代码的storefrontlib/src/cms-structure/routing/default-routing-config.ts文件里,能看到Spartacus产品页面的 ...
SAP Spartacus 4.0 关于SSR CSS 处理逻辑的一些 warning 消息的处理
custom-file-input:lang(en)~.custom-file-label -> unmatched pseudo-class :lang 原因:混合导致的一些问题:默认 Boo ...
SAP Spartacus user form页面的css设计重构
(1) fieldset应该和legend搭配起来用.下图的第102行fieldset应该改为div: (2) 在_details.scss里,fieldset和label.form-check具有相 ...
如何定制化SAP Spartacus的购物车图标
SAP Spartacus默认的购物车图标如下图所示: 使用如下的css代码对其外观进行修改: /* You can add global styles to this file, and also ...

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

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

最新文章

热门文章