如何为BigCommerce开发定制主题CSS模板

对于我在这里工作的最新项目，我被告知为BigCommerce开发定制（模具）主题，以便我们可以通过BigCommerce主题市场分发它们。我来自Wordpress的背景，所以做出这个飞跃让我有点头晕目眩，但我想我理解他们的平台在很大程度上是如何组合在一起的。有些组件由Handlebar表达式调用，这些组件可以在模板文件中重新排列，而任何默认样式都可以通过config.json应用，客户端可以通过主题编辑器GUI进行基本更改

但我还是迷路了。一些设计要求需要大量的CSS更改，而不仅仅是JSON变量。我有一个完全开发的HTML/CSS主题，我想通过将它转换成BigCommerce可以接受的格式来使用它，但我找不到任何关于如何实现这一点的文档。我可以乏味地修改每个现有的SCSS文件，或者像开发子主题一样覆盖它们。我很想完全放弃SCS并重新开始，但接下来我需要重新创建用于在需要的地方拉入JSON的SASS函数

---

当我从一张空白画布（或者至多是一张草图）开始并在其上构建时，我的工作会更好，而不是将一个完整的产品变形为我所需要的。BigCommerce有什么方法可以做到这一点吗？

您是否尝试使用BigCommerce提供的模具资源

---

我发布这个问题已经有一段时间了，从那以后我学到了更多关于模具开发的知识

简单的回答是，添加，不要删除。BigCommerce的基石主题并不像wordpress的下划线那样是一个空白主题。这是一个充分发展，但非常基本的主题。最好尽可能避免编辑其默认文件，因为它可能会在将来更新，并可能覆盖您的更改。相反，添加带有自定义主题名称的文件夹。例如，您通常会看到：

/scss/layouts/body/_body.scss

因此，您可以在保留上述结构不变的情况下添加自己的样式：

/scss/layouts/customtheme/body/_body.scss

我们不必覆盖前_body.scss中定义的样式，因为我们还需要将新创建的样式导入到

/scss/layouts/_layouts.scss

在此文件中，您将在顶部看到以下代码段：

// =============================================================================
// LAYOUTS
// =============================================================================


// Global layouts
// -----------------------------------------------------------------------------

// Header
@import "header/header";

// Page
@import "body/body";

因为下划线定义了SCSS分部，所以我们知道仅仅创建_body.SCSS并没有任何作用。我们必须找到主SCSS文件并添加@import“body”，或者在这种情况下，我们必须将其添加到另一个导入主文件的部分。因此，只需删除或注释掉默认值

//@import "body/body";

并将其替换为

@import "customtheme/body/body";

就这样。您没有覆盖或与任何现有样式竞争，您已经自定义了车身的外观。您也可以添加自己的组件，但这是下一次的另一个主题。只需说一句，中有更多的SCSS文件

/SCS/组件/

---

他们遵循同样的原则。

事实上，我是这样做的。我提到了他们的youtube频道和论坛，以及他们的文档。谢谢你的回答！值得注意的是，您不想删除或修改原始_body.scs的原因是为了防止将来对基本主题进行更新。当BigCommerce要求您更新基础基石主题时，他们可能会对原始的_body.scs进行更改，因此您不希望主题的样式发生冲突。