2

I'm doing Salesforce trailhead, Lightning Component Basics - Input Data Using Forms. I have a problem with SLDS static resource. Earlier, I had downloaded slds 2.0.2 (named it SLDS202). Inside lightning application I have the following line of code:

<ltng:require styles="{!$Resource.SLDS202 +
     '/assets/styles/salesforce-lightning-design-system-ltng.css'}"/>

However, when I run the page, I can see in the console error 404 not found. I also tried this one:

<ltng:require styles="/resources/slds202" />

but in console another error appears: Refused to load the stylesheet (...) because it violates the following Content Security Policy directive: "style-src 'self' chrome-extension: 'unsafe-inline'".

Could you tell what the problem is about?

4

They changed the file name in 2.0 it seems. If you look in the zip file you downloaded you will see that the stylesheet is now named:

salesforce-lightning-design-system.css

So the following should work for you:

<ltng:require styles="/resource/SLDS202/assets/styles/salesforce-lightning-design-system.css" />
  • You are right, thank you very much! Seems they didn't update it in Trailhead. – rmatusiak Jun 28 '16 at 12:26
3

Please never, ever use the non-scoped file in a Lightning Component. Feel free in a Lightning application (my.app).

The proper method now (the Trailheads are being updated) is to use a custom scope. It's mentioned on the Platform > Lightning page here: https://www.lightningdesignsystem.com/platforms/lightning/

And there's a link to the scoping tool from that page that goes here: https://tools.lightningdesignsystem.com/css-customizer

It was mentioned several places, but clearly I didn't document it well enough for those of you that had already been using a static resource. Apologies.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.