如何将 css 文件添加到 Squarespace 开发者模式答案

【问题标题】：How to add css file to Squarespace developer mode如何将 css 文件添加到 Squarespace 开发者模式
【发布时间】：2020-07-23 22:39:23
【问题描述】：

我在样式中添加了index.css，并将其包含在template.conf中：

{
  "name": "Wright",
  "author": "Squarespace, Inc.",
  "layouts": {
    "default": {
      "name": "Default",
      "regions": [
        "site"
      ]
    }
  },
  "stylesheets": [
    "index.css"
  ],
  etc...
}

我从文档中看到样式表会被编译成site.css：

stylesheets

List of your stylesheet. Stylesheets will be compiled into site.css following the ordering here.

NOTE: If you add a file named reset.css to the /styles/ folder it will automatically get added to the top of the site.css file. It should not be listed in the "stylesheets" variable in template.conf.

site.css 文件在哪里？从site.region怎么调用？

目前，我无法以这种方式加载自定义 css 文件。

【问题讨论】：

标签： css squarespace

【解决方案1】：

site.css 文件是所有 Squarespace 的默认样式以及您在问题中通过 stylesheets: [ ... ] 添加的任何样式的编译结果输出。

每当您（或 Squarespace 的）样式表发生更改时，它都会自动为您创建。您没有对它的直接写入权限，并且不会在您的模板中看到它。

因此，如果您实际上已按照问题中所述完成（将文件添加到 /styles 并将其添加到您的 template.conf 文件中），并且您随后通过 Git 更新了模板（请注意 SFTP有错误并且可能不会更新您的文件），您的 CSS 将在此后用户加载网站时包含在 site.css 中。

回答您的最后一个问题，site.css 文件不是通过任何区域文件直接加载的。也就是说，如果你在代码中搜索它，你不会找到它。相反，它作为{squarespace-headers} 的一部分加载，您可以在模板文件中找到它，无论是在.region 文件还是.block 文件中。

【讨论】：