Multi-site styling support

Engine 3.3 brings native support for site-specific styling. Developers can configure their bundles to support multi-site styling and start adding site-specific styles in separate SCSS files in their bundle. fusion build will pick up and watch the changes in the development mode.

How to enable support for multi-site styling to your existing bundle?

Enabling site-specific styling requires two simple steps:

Step 1. Set values in your env files (a new obj in env JSON files)

Within the environment JSON configuration file inside the feature pack, you are able to configure your site styles via JSON object mapping. Using the key siteStyles as the object name you can then set key-value pairs for your site-to-site styles. For each key-value pair, the key would be the site name as denoted via site service and the value would be the site styles to use for the given site. The value also maps to a folder within the feature pack which is documented in step 2.

Note

You’ll see in the example below site-c has the value of site-a. This is acceptable if you have some sites that use the same styling as another the values do not have to be unique for a given site.

{
    "siteStyles": {
        "site-a": "site-a",
        "site-b": "site-b",
        "site-c": "site-a"
    }
}

Step 2. Place site-specific styles in sass files in the site-styles folder, so that fusion picks it up automatically

To configure a site to specific styles, you can create key-value mappings in your environment config file, where the value is a reference to a folder within the feature pack. The engine requires the folder name to be the same as the value from the config and be inside the site-styles folder at the root of your feature pack. Within this folder, Engine expects there to be an _index.scss file. The _index.scss is the entry point for Engine’s Sass build process. Within this file, you are free to use any of Sass’s features.

The config example from step 1, would give us the following folder/file structure in our feature pack:

feature-pack/
    - site-styles
        - site-a
            - _index.scss
        - site-b
            - _index.scss

    - components
    - content
    - environemnt