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:
- Create a dependency on
@salesforce-ux/design-systemby adding it to a
- Copy SLDS resources into the
/src/assets/directory. The following build script is one example of how to do so:
- Link to the SLDS stylesheets in the app's static layout template.
- Configure the application to support SLDS resources in
syntheticShadowproperty must be
trueto allow the SLDS stylesheet to function as global styles.
- Use the static layout template created in the previous step in your
- To allow browser access, set up
/lightning.utilitySpritepaths to SLDS stylesheets, fonts, and images, respectively.
Run the following terminal commands from the root of your project: