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

Question

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

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

当我用空白的画布（或者最多粗略的草图）开始绘画时，我的工作要好得多，而不是将一个完整的产品变形为我所需要的。有没有办法用BigCommerce做到这一点？

Answer 1

自从我发布了这个问题之后，我有一段时间了，从那以后，我学习了更多有关Stencil开发的知识。

这里的简短答案是，加上，不要删除。 BigCommerce的基石主题不像WordPress的_underscores这样的空白主题。这是一个充分发展，但非常基本的主题。最好避免在可能的情况下编辑其默认文件，并在其中添加自定义主题名称的文件夹。例如，你通常会看到：

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

/SCSS /组件/

，他们遵循同样的原则。

Answer 2

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

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