Use Salesforce Lightning Design System with LWR on Node.js

Include Salesforce Lightning Design System (SLDS) for styling with your LWR application.

To make the Salesforce Lightning Design System (SLDS) available in an LWR application:

1. Create a dependency on @salesforce-ux/design-system by adding it to a devDependencies section in package.json:

2. Copy SLDS resources into the /src/assets/ directory. The following build script is one example of how to do so:

3. Link to the SLDS stylesheets in the app's static layout template.

4. Configure the application to support SLDS resources in lwr.config.json:
   1. The syntheticShadow property must be true to allow the SLDS stylesheet to function as global styles.
   2. Use the static layout template created in the previous step in your routes.
   3. To allow browser access, set up /assets, /fonts and /lightning.utilitySprite paths to SLDS stylesheets, fonts, and images, respectively.

Run the following terminal commands from the root of your project:

Open the site at http://localhost:3000. Read Get Started with LWR for details on LWR's Yarn commands.