每日整理真实提问 356 个问题 · 726 个回答 需要系统性的技术文档?看 Shopify 技术百科 1000 篇 → 400-873-8117
待解决 提问于 2 个月前

主题应用扩展的样式不生效

2 个回答 4,783 次浏览 应用与扩展 最后活跃 2 个月前
83

在主题应用扩展里写了 CSS,前台完全没效果,也不报错。

陈
陈工提问者
Shopify 认证开发者 · 专注主题与 Liquid
2 个月前提问 · 已收到 2 个回答

2 个回答

最高票回答 · 等待提问者确认
37

先把判断放在前面:扩展的 CSS 需要显式引入,且受作用域限制,不能直接写全局选择器。

1处理顺序

  1. 在 liquid 里用 {{ 'app.css' | asset_url | stylesheet_tag }} 引入。
  2. 用扩展提供的样式文件声明,不要写在 <style> 里。
  3. 避免使用全局标签选择器,用扩展的根容器限定作用域。
  4. 确认扩展已在主题编辑器里启用。
  5. 用开发者工具看 CSS 是否被加载,以及是否被主题样式覆盖。
验收:扩展样式正确应用到组件,不影响主题其他部分。
风 风格技术团队 回答于 2 个月前
3

扩展运行在主题的 DOM 里,样式冲突很常见。给根节点一个唯一 class 并全部加前缀,能省掉大量排查时间。

泽 阿泽 · 前端工程师 · 2 个月前

你的处理方式是什么?

写下你实际验证过的步骤,比「我也有这个问题」有用得多。当前版本为静态展示,提交后会由团队整理并回复。

描述你遇到的现象、店铺环境(主题 / 套餐 / 应用)、已经试过哪些操作……
我要单独提问 工作日 10 分钟内回复,可直接加微信 fenggejishu