SCA enables you to customize your website 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.
a. Create a directory called extensions. Where you place this depends on your implementation.
If implementing 2019.2 and later, create the extensions directory within the SC_xxx directory within your root source directory. Examples: SC_20.1/extensions, SC_19.2_Live/extensions.
If implementing 2019.1 and earlier, create the extensions directory within the Modules directory. For example: Modules/extensions.
b. In the extensions directory, create a subdirectory called CustomSass@1.0.0.
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.
c. In the CustomSass@1.0.0 directory, create a subdirectory called Sass.
- Create a Sass file.
a. In the Sass directory, create a new file called _custom-sass.scss.
b. Add Sass variable definitions to this file.
- Create the ns.package.json file.
a. Create a file called ns.package.json in the CustomSass@1.0.0 directory.
b. Add the following code to the ns.package.json file.
- Update the distro.json file.
a. Add an entry for your CustomSass@1.0.0 module to the distro.json file.
If implementing 2019.2 and later, the distro.json file is located in the Advanced directory of the SCA source code.
If implementing 2019.1 and earlier, the distro.json flie is located in the root directory of your SCA source code.
b.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.
- View your changes.
If you are running a local server, you can view your changes by reloading your website.
If you are viewing your site in NetSuite, you can deploy your changes using the developer tools.