缩小scss.liquid文件

Question

我是Shahzaib，来找你帮忙！

我在Shopify和liquid方面还是个新手，但我正在努力做到这一点。

我在Shopify上巧妙地尝试缩小一个scss.liquid文件，通常当我尝试对css文件执行此操作时，我会使用一个在线缩小程序，但很明显，scss.liquid格式没有得到正确处理。每次我试图缩小它，我的网站崩溃？

你们有什么关于缩小scss.liquid文件的建议吗？

提前谢谢你，

向你致敬，沙扎布。

Answer 1

我建议设置一个吞咽任务来做到这一点。这将有助于将您的SCSS文件简化为单独的文件，无论其样式如何。此外，您不会编辑您的主题的默认theme.scss.liquid文件，因此更容易覆盖默认样式，并且您可以确切地知道哪个样式是您的样式，哪个样式是主题的样式。

要设置gulp任务，您需要安装node.js和gulp。为此，我建议使用npm。这是一个很好的入门教程，您需要对其进行一些调整，以适应您的Shopify文件结构。例如，我建议为您的自定义.scss文件添加一个src目录，并将它们编译到theme.scss.liquid目录中的一个文件中，而不是直接在src文件中操作。

https://css-tricks.com/gulp-for-beginners/

完成这些说明后，请确保在提交之前将node_modules添加到.gitignore文件中。

接下来，设置您的项目以使用该工具包。https://shopify.github.io/themekit/，并在保存文件时运行您的吞咽任务。这将把你的src文件编译成一个资源目录中的文件，然后由This上传到你的存储中。

希望这能有所帮助！

Answer 2

我赞同that 10的回答，并补充说，如果静态资产的最小化将成为您的主题开发工作流程的一部分，请使用在本地运行的gulp.js，并使用类似于gulp shopify-upload的功能来监视您的更改并将其推送到您的商店：

https://www.npmjs.com/package/gulp-shopify-upload

具体请参阅基本用法。