在 Stencil Utils 中缩小 JS 和 CSS - BigCommerce

Question

我正在寻找一种方法来压缩使用 Stencil-Utils 主题的 BigCommerce 网站上的 JavaScript 和 CSS 文件。 我用过的其他 CMS 内置了工具，但这个似乎更实用一些提示？

Answer 1

Stencil，将所有 JavaScript 模块捆绑到一个文件中，并会自动缩小您的模块。 除了 Stencil 使用预构建的包管理器在正确的目录中分发 JavaScript 的组件之外，Stencil 主题还包括一个用于在每页上运行 JavaScript 的 API，以帮助运行您的主题可能具有的任何自定义逻辑。 这是一些关于在 Stencil 主题中实现自定义 JS 模块以自动捆绑和缩小的开发选项的文档。

除了 Stencil 捆绑和缩小 JavaScript 模块之外，Stencil 主题还支持 Sass 和 SCSS。 与 JavaScript 模块一起，嵌套的 CSS 属性都存储在 Stencil 的主题资产目录中，即“assets/js/”和“assets/scss/”。 如果您希望将自己的自定义 Sass 文件添加到您的 Stencil 主题并启动这些文件的自动编译。 在您的 HTML 标记中包含关联的标签以隔离您的自定义样式，然后使用您选择的文件名前缀将其放置在此路径位置“/assets/scss/customname.scss”，并通过“@”将自定义文件导入到 theme.scss导入“自定义名称”；'。 一旦你通过'{{stylesheet'/assets/css/theme.scss'}}'确定theme.scss位于templates/layout/base.html/中。 然后，您可以使用 Stencil CLI 使用“模板启动”命令将自定义 Sass 文件重新编译为指定的 {theme-name}/assets/css/theme.scss 文件。 这是一些关于使用自定义 Sass 函数和使用 Stencil 编译自定义 Sass 文件以及捆绑和推送主题的精彩文档。

希望这可以帮助。