SLDS Lightning static Resource not loading

Question

Am trying to apply CSS for a page using SLDS which is refered from static resource but am unable to make it work. Please help

Am refering the above resource in .app page as below

<ltng:require styles="/resource/SLDS/assets/styles/salesforce-lightning-design-system.min.css"/>
<div class="slds">
    <div class="slds-page-header">
    <p class="slds-page-header__Title" title="Race Tracker">Race Tracker</p>
    </div>
    <div class="slds-m-around--small slds-p-top--large">
    <c.newRace />
    </div>
    <div class="slds-m-around--small slds-p-top--large">
     <c.RaceList />
    </div>
</div>

Answer 1

I would recommend against using SLDS as a static resource in your case as this is no longer the best practice.

Since Winter '17, you can just extends force:slds (documentation here) in you app such as this:

<aura:application extends="force:slds">

Doing so will automatically add the right SLDS resources and you will not have to worry about SLDS upgrades.

Answer 2

You have to mention the static resource name followed by file Path of CSS inside SLDS Zip file.

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

Reference