19

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).

1 Answer 1

16

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';
5
  • 1
    Thank you @pmdartus, this is really helpful. I am looking for the new version of SLDS. Aug 2, 2019 at 7:35
  • @pmdartus - while i have some experience in developing lwc's within a scratch org.. I am new to the open source version at lwc.dev. I followed the advice you gave (and referenced your commit) to upgrade my project to have the SLDS assets. Should this have given me the ability to use ShowToastEvent? I got an error - Cannot find module 'lightning/platofrmShowToastEvent'
    – bkwdesign
    Dec 11, 2020 at 20:02
  • 1
    One thing I wanted to point out -- the synthetic-shadow allows you to import any CSS framework and have it propagate down to be available to all LWC components in the solution. I am currently using it with Tailwind. You just need to reference the stylesheet in your root index.html.
    – tyshock
    Jan 15, 2021 at 15:52
  • 1
    Does anybody knows if we have any update regarding this? Is it SLDS already available lwc applications?
    – Saulo
    Mar 6, 2021 at 3:32
  • @pmdartus Was that both dependencies as --save-dev or just one of them?
    – Brad Turek
    Sep 27, 2021 at 16:24

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .