Shopify 样式问题

Question

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

在 assets 文件夹中有一个 theme.css 和一个 theme.min.css。我发现我可以制作的唯一新款式或过山车都在 min.css 文件中？

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

Answer 1

我不确定我是否理解您正在使用或尝试做的事情，但这里有两条信息可能会有所帮助：

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

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

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

如果您想缩小 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 的开发人员有哪些替代方案可用。 “

Answer 2

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

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

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

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

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

Shopify 样式问题

Shopify styling isses

css

minify

shopify