在Shopify中使用SCSS / SASS

Question

似乎无法让SCSS在Shopify中运行。

我的CSS文件名'styles.scss.liquid'：

$turquoise: #35d7db;

#toolbar {
  width: 100%;
  display: inline-block;
  background-color: $turquoise;
}

我在Shopify中的HTML：

{{ 'styles.scss' | asset_url | stylesheet_tag }}

<div id='toolbar'>
    <p>Tools go here</p>
</div>

颜色没有显示，根本不确定问题是什么。感谢任何建议。

干杯，DB。

Answer 1

它应该是{{ 'styles.scss.css' | asset_url | stylesheet_tag }}您还需要添加.css。

Answer 2

  

在Sass文件中使用Liquid

     

在Shopify服务器上编译Sass时，   您将创建一个style.scss.liquid文件。然后Shopify编译   首先使用Liquid，然后使用Sass，以创建最终的CSS文件。

来源：A Beginner's Guide to Sass with Shopify — Part 3

Answer 3

使用site.scss.liquid文件夹中的/assets文件并将其添加到theme.liquid头标记之间的{{ 'site.scss.css' | asset_url | stylesheet_tag }}文件中来完成这项工作

在https://shopify.github.io/slate/docs/styles-with-liquid中找到的文档

例如，如果要上载styles.scss.liquid文件，则表示 可以使用以下标记将其包含在您的主题中：

<link type="text/css" href="{{ 'styles.scss.css' | asset_url }}" rel="stylesheet">