Chrome 开发工具 VS Shopify 格式化文件

Question

我目前正在使用 Chrome 开发工具中的 Coverage，以便从我的文件中删除未使用的 CSS。我的问题是来自 Coverage 的文件与我的主题编辑器中的文件完全不同。我用 colorize.scss 文件发布了两张照片。有谁知道如何查看或编辑开发工具显示给我的格式化文件？

Screenshot from Dev Tools

Screenshot from Shopify

Answer 1

这是由于 SCSS 个文件，Shopify 主题包含扩展名为 .scss.liquid 或 .css.liquid 的文件，这些文件在服务器端编译并正常发送 CSS .

因此，当您从开发工具或查看页面源代码检查它时，这些是编译版本，不包含与主题文件相同的 SCSS 代码。

注意： Shopify 现在撤回对 SCSS 文件的支持以提高页面加载速度，但对过去的旧主题具有向后兼容性这些 SCSS 个文件。