Lightning Design System as a static resource not working

Question

I'm trying to create a Custom Scope CSS for Lightning Design System using Static Resources and CSS customizer but It's not working at all.

It updated the Sass files, zipped them out and tried to post them as Static Ressource but it fails because the zip file is bigger than 5MO.

I don't understand :

• Do I need to build the Sass files before zipping and uploading?
• Do I need to send all files or just modified ones?

Since I was not able to make it work with CSS customizer and Sass files, I tried to edit the compiled css downloaded from lightningdesignsystem.com documentation and post it as Static ressource Since Salesforce documentation is poor on the topic, I follow every step of this tutorial. Once again the zip is over 5MO. Actually, the zip downloaded by clicking "Download Lightning Design System (Static Resource) (2.9.4)" is over 5MO even before any changes (5.1MO).

What am I missing here?
Thank you for you help!

Answer 1

You did not mention where you are trying to use SLDS. I assume its visualforce page since you are trying to upload in salesforce static resource.

If this is the case, you can use apex:slds.

Documentation:

apex:slds Allows Visualforce pages to reference Lightning Design System styling and to include custom themes. Use this component instead of uploading the Lightning Design System as a static resource.

Include in a Visualforce page to use Lightning Design System stylesheets in the page.

You can refer to https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_slds.htm

If its communities, lightning component will get styling slds be default as its lightning experience.