[SalesForce] Lightning Web Components Open Source with Lightning Design System (lwc with slds)

I am trying to local development with Lightning Web Component. The https://lwc.dev works good and I want to also add the Lightning Design System style but I am getting errors.

I have installed the style package @salesforce-ux/design-system and import it via:

async styleLoad() {
        await require('@salesforce-ux/design-system');
    }

But this does not work. The error message:

./src/modules/my/app/app.js
Module not found: Can't resolve '@salesforce-ux/design-system' 
 in '/home/ubuntu/Desktop/CustomApp/src/modules/my/app'

Does someone any positive experience to import the lightning design system in a local lightning web component development.

PS: Everything works on Salesforce server or playground, my problem is: it does not work in local development environment (I am using npm as package manager).

Best Answer

You can't import the @salesforce-ux/design-system directly via require. If you look at the package.json, there is no main or module field designating the module entry point.

The current SLDS version is not compatible with the native shadow DOM (some selectors will attempt to style elements in different shadow trees). We are currently working on a new version of SLDS which better aligns with the shadow DOM restrictions. In the meantime, if you want to use SLDS + LWC standalone you will need to make sure the application runs with @lwc/synthetic-shadow.

The simplest way to add SLDS is to copy over the SLDS artifact to the /dist folder. Here is the commit containing the changes to enable SLDS in an lwc-create-app project: commit.

  • install @salesforce-ux/design-system and @lwc/synthetic-shadow as an NPM dev dependency
  • add the following line in the resources section lwc-services.config.js file to indicate that the SLDS artifacts should be copied over to the dist folder:
{
    from: 'node_modules/@salesforce-ux/design-system/assets',
    to: 'dist/resources/slds'
}
  • import @lwc/synthetic-shadow before the lwc import in the index.js to force the framework to use the synthetic shadow DOM instead of the native one provided by the browser.
import '@lwc/synthetic-shadow';
Related Topic