Sass Entry Points for Theme Customization in SuiteCommerce

TL;DR Opening

Sass entry points are essential for integrating styles into SuiteCommerce applications, including Shopping, MyAccount, and Checkout. Each theme has specific entry points, ensuring the correct styles load for different parts of the application.

Understanding Sass Entry Points

Every theme in SuiteCommerce relies on a designated entry point file to load the Sass stylesheets necessary for specific applications. These entry points declare which Sass files are applicable based on the needs of each application. For instance, a file that is relevant only to the shopping application must load via the shopping.scss entry point, while styles applicable to all three applications should be referenced in each respective entry point.

Key Entry Points by Application

Below are the core entry points utilized in SuiteCommerce themes:

It's crucial that all Sass files referenced in these entry points are also declared in the theme's manifest.json file to ensure they are compiled properly.

Important Considerations

When customizing a theme, particularly when adding new Sass files, make sure to format changes correctly within the manifest.json. This file must include paths to all HTML templates, Sass, and assets for seamless incorporation into the active theme.

Incorporating New Files into the Manifest

1. Create your new Sass file and place it into the appropriate directory as specified. For Sass files, use:

   Workspace/<THEME_DIRECTORY>/Modules/BaseSassStyles/Sass/reference-theme/_newSass.scss

2. Open the manifest.json file located at:

   Workspace/<THEME_DIRECTORY>/manifest.json

3. Add your file in the relevant files array under the appropriate application header in the manifest structure.

Note: Proper naming conventions are vital to avoid conflicts within your theme's file hierarchy. Always check for existing file names to prevent issues.

Conclusion

By managing Sass entry points effectively within your theme, you ensure that styles are applied correctly across various applications, creating a seamless experience for end-users. This practice not only enhances functionality but also aligns with best practices for maintaining robust theme customizations in SuiteCommerce.

Key Takeaways

• Each application has specific Sass entry point files.
• All Sass files must be included in the manifest.json to compile correctly.
• Proper folder structure and naming help avoid conflicts.