SCA enables you to customize your web store to easily apply global style changes while supporting migration to later versions. When customizing styles, you create a custom module that overrides specific Sass variables already defined in the BaseSassStyles module. You then redefine application dependencies so that base Sass styles import your customizations in the correct order.
This example shows how to create a custom module to change the default background and foreground colors.
To extend a Sass file:
Create the directory structure to store your custom module.
Create a directory called
extensions within the
extensions directory, create a subdirectory called
When creating a new custom module, the module name must be unique. You must not have duplicate module names, even if those modules reside in different folders.
CustomSass@1.0.0 directory, create a subdirectory called
In general, when creating custom modules, you should create a directory structure similar to that described in the procedure above. See Organize Source Code for Custom Modules for more information.
Create a Sass file.
In the Sass directory, create a new file called _custom-sass.scss.
Add Sass variable definitions to this file.
These variable definitions override the base Sass variables defined in the BaseSassStyles module. See Design Hierarchy for more information.
$sc-color-primary: #0000ff; // originally #f15c28;
$sc-color-secondary: #00ff00; //originally #5B7F8C;
$sc-color-theme: #00ff00; //originally #5B7F8C;
$sc-color-link: #00ff00; //originally #2f9ac3;
$sc-color-theme-light: #00aa00; // originally #9cb6bf
$sc-color-dark-copy: #e7d13b; // originally #1f2223;
$sc-color-copy: #ede39f; //originally #404040;
Create the ns.package.json file.
Create a file called ns.package.json in the
Add the following to the ns.package.json file.
Update the distro.json file.
Add an entry for your module to the distro.json file located in the root directory of the SCA source code.
"name": "SuiteCommerce Advanced Mont Blanc",
Split the BaseSassStyle entry in the
sass object and add your custom module between them. This ensures that the Sass variables are loaded in the correct order as follows:
The main-variables Sass file.
The custom Sass variables defined in the CustomSass module.
Additional Sass files of the BaseSassStyles module. Including these last ensures that the additional Sass files import the custom variable definitions.
You must define these dependencies for each application whose Sass variable you want to change.
View your changes.
If you are running a local server, you can view your changes by reloading your website. See SCA on a Local Server for more information.
If you are viewing your site in NetSuite, you can deploy your changes using the developer tools. See Deploy to NetSuite for more information.