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?

Improve this question

2 Answers 2

Reset to default
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" />
Improve this answer
1
  • You are right, thank you very much! Seems they didn't update it in Trailhead.
    – rmatusiak
    Commented Jun 28, 2016 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.

Improve this answer

You must log in to answer this question.

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