Shopify 样式问题答案

【问题标题】：Shopify styling issesShopify 样式问题
【发布时间】：2021-07-13 19:23:55
【问题描述】：

我正在使用 shopify，模板（我相信）是基线。

在 assets 文件夹中有一个 theme.css 和一个 theme.min.css。我发现我可以制作的唯一新样式或超载在 min.css 文件中？

似乎没有 SCSS 文件。 theme.css 是如何缩小的，因为目前它不是自动发生的。

【问题讨论】：

标签： css shopify minify

【解决方案1】：

有时开发人员会添加两个版本的样式表（.css 和 min.css），这只是一个好习惯，但大多数情况下，缩小版本（min.css）会连接到 theme.liquid。 .js 文件也是如此。

如果你想添加自定义样式，我建议在 assets 文件夹中添加一个名为“custom.css”的新文件，并使用 Liquid 样式表标签将其连接到 theme.liquid，如下所示：

{{ 'custom.css' | asset_url | stylesheet_tag }}

将此标签放在theme.liquid 中的'theme.min.css' 样式表标签下很重要。这样它将覆盖大部分的 theme.min.css 样式。

我不建议在 Shopify 中使用 SCSS，因为它已被弃用。

【讨论】：

【解决方案2】：

我不确定我是否了解您正在使用或尝试执行的操作，但以下两点信息可能会有所帮助：

使用的样式将在 HTML 中指定；所以寻找像

<link rel="stylesheet" type="text/css"

在您正在使用的页面上，您会看到它可能指向 css 的“最小”版本。更改它以更改加载的样式表。

如果您想缩小 CSS，有很多选项，包括独立工具、网站和软件包。这里有一个很好的资源来解释这个过程是什么，以及选择一种方法来缩小你的 css：

https://www.elegantthemes.com/blog/tips-tricks/how-to-minify-your-websites-css-html-javascript

编辑： Shopify 正在弃用 Sass，这篇文章解释了改用什么 https://www.shopify.com/partners/blog/deprecating-sass “作为我们正在进行的计划的一部分，我们决定弃用 Sass，以改善店面的用户体验，并为未来的发展铺平道路。在短期内，Sass 将继续致力于 Shopify 主题，但我们正在积极迁移我们的主题以仅使用 CSS 样式表。

在本文中，我们将了解为什么我们决定放弃在主题中使用 Sass，以及开发人员如何调整他们的自定义主题以采用原生 CSS 特性并保持功能。我们还将研究那些希望在其开发工作流程中继续使用 Sass 的开发人员可以使用哪些替代方案。 "

【讨论】：

是的，它正在加载缩小版本，但编辑它似乎很奇怪。我会以为你编辑 theme.css 并且它会自动更新 theme.min.css？我是shopify的新手，所以也许它不是那么复杂......
@j00m 我刚刚查看了 Shopify，看起来他们正在弃用此功能：“在编译主题上使用 Sass 已被弃用，样式表应迁移到原生 CSS 功能。有关此更改以及如何在主题开发工作流程中本地使用 Sass 的更多信息，请阅读我们关于弃用 Sass 的公告博客文章。” shopify.com/partners/blog/…我已经用这个新信息编辑了答案