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-system
by adding it to adevDependencies
section inpackage.json
:
- 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
lwr.config.json
:- The
syntheticShadow
property must betrue
to allow the SLDS stylesheet to function as global styles. - Use the static layout template created in the previous step in your
routes
. - To allow browser access, set up
/assets
,/fonts
and/lightning.utilitySprite
paths to SLDS stylesheets, fonts, and images, respectively.
- The
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.