How to override CSS and client-side JS in SFRA (Salesforce Commerce Cloud)?

Start by modifying the package.json in your custom site

Salesforce provides a mechanism to selectively override CSS styles and client-side JavaScript because you’re not supposed to edit the app storefront base cartridge directly. The paths field in the package.json file lists every cartridge with CSS and client-side JavaScript functionality that has been configured in your site.

• Go to the root of your custom cartridge (If you followed my previous article it will be sfrademo in this case).
• Find the package.json file and add the paths property. The path's base property points to the local directory containing app_storefront_base. Similarly, you can add properties for the cartridges you want to import functionality from, for example, plugin_applepay cartridge.

Note: Make sure you validate the JSON file syntax once you are done.

cartridge path

package.json

Overriding the CSS files

You must import the base files in order to override the CSS and JS files from the base storefront cartridge in your custom project. You can make a sample scss file to contain CSS files from the base, for example. You can create this folder if doesn’t exist.

sfrademo/cartridges/app_sfrademo/cartridge/client/default/scss/global.scss file

SCSS is a superset of CSS that is used to create stylesheets. Sass (Syntactically Awesome StyleSheets) is a CSS extension that uses the SCSS (Sassy CSS) syntax. See http://sass-lang.com/guide for more information. The majority of the styles in the following sample global.scss file comes from the basic cartridge. Package.json specifies the location of the base cartridge. This example imports style sheets using the base property provided in package.json, which is highlighted above.

Overriding the client-side JS files

You can use the “paths” property defined in the packagae.json file when you want to inherit and override client-side JavaScript functionality.

The following example uses the path described by the base property to require a client-side script in the base cartridge.

‘use strict’;

var processInclude = require(‘base/util’);

$(document).ready(function () {

processInclude(require(‘./newsletter/newsletter’));

});

Compilation

You can compile your client-side code by running the following commands-

npm run compile:js , npm run compile:css , npm run compile:fonts or a single command like this- npm run compile:js && npm run compile:scss && npm run compile:fonts (If you are having an issue compiling scss files, try running ‘npm rebuild node-sass’ from within your local repo.)

npm run lint — Execute linting for all JavaScript and SCSS files in the project. For testing, look at the documentation- https://github.com/SalesforceCommerceCloud/storefront-reference-architecture

Finally, the compiled resources can be found inside the static folder of your custom cartridge.

Thanks for reading.