Carcloud Sites Styler

A VS Code extension for developing and previewing custom CSS for sites hosted on CarCloud servers.

Getting Started

1. Add Your Credentials

Before anything else, you need to configure your AWS credentials:

1. Open the Carcloud Sites Styler panel in the sidebar
2. Click the Settings (gear) icon
3. Enter your Access Key and Secret Key

2. Initialize Your Workspace

1. Open an empty folder in VS Code
2. In the Carcloud Sites Styler sidebar panel, click Initialize Workspace
3. Enter the live domain for the site you're working on (e.g. www.example.com)
4. The extension will download the starter template, set up your project structure, and run npm install

Once initialized, your workspace will contain:

• workspace/ — your editable SCSS files, fonts, and images
• core/ — read-only CarCloud framework files (for reference only)
• config.toml — auto-generated site configuration

3. Edit Styles

Edit the SCSS files in the workspace/ folder:

• client.scss — main entry point
• _variables.scss — colors, fonts, and other variables
• _overrides.scss — style overrides
• _fonts.scss — font declarations

Files compile automatically on save. Check the Problems panel in VS Code for any SCSS compilation errors.

4. Preview Your Changes

Click the Preview (globe) button in the Overrides panel toolbar. This compiles your SCSS and opens the staging site in your browser with your local CSS injected.

The extension runs a local server (starting at port 5050) to serve your compiled CSS to the staging site.

5. Push Changes

When you're happy with your changes, click the Push Changes (up arrow) button in the Overrides panel toolbar. This packages your workspace files and uploads them to the CarCloud server.

Sidebar Panels