如何在 Stencil 中为 BigCommerce 开发自定义主题 CSS

Question

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

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

当我从一张空白画布（或最多一个粗略的草图）开始并以此为基础时，我的工作要好得多，而不是把一个完整的产品变成我需要的东西。 BigCommerce 有什么方法可以做到这一点吗？

Answer 1

自从我发布这个问题以来已经有一段时间了，从那时起我对 Stencil 开发有了更多的了解。

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

/scss/layouts/body/_body.scss

因此您可以添加自己的样式，同时保持上述结构不变：

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

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

/scss/layouts/_layouts.scss

在这个文件中，你会在顶部看到这个 sn-p：

// =============================================================================
// 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文件

/scss/components/

它们遵循相同的原则。

Answer 2

您是否尝试过使用 BigCommerce youtube channel 提供的模板资源？

Also, the forums would be a great place to start having a chat for best practice questions。