Search code examples
csssquarespace

How to add css file to Squarespace developer mode

I added index.css inside styles, and included it in template.conf:

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

I see from the documentation that stylesheets will be compiled into 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.

Where is this site.css file? How is it called from site.region?

Currently, I'm unable to load the custom css file this way.

Solution

  • The file site.css is the resulting output of the compilation of all Squarespace's default styles as well as any styles you add via stylesheets: [ ... ] as you have in your question.

    It is automatically created for you whenever your (or Squarespace's) stylesheets change. You do not have direct write access to it and it will not be seen within your template.

    Therefore, if you have in fact done as you stated in your question (adding the file in /styles and adding it to your template.conf file), and if you have then updated your template via Git (note that SFTP is buggy and may not update your files), your CSS will be included in site.css thereafter when users load the site.

    To answer your last question, the site.css file is not loaded directly via any region file. That is to say, if you search for it within the code, you will not find it. Rather, it is loaded as part of {squarespace-headers}, which you will find within your template files, either within a .region file or a .block file.