I developped a quick lightning component that is embedded in a visualforce page and so far everything is fine. Look wise though, it seems like some styles aren't migrating correctly from my Sandbox environment and the Production environment, both running the exact same code.

Here are a quick overview of the difference that I see in the data table (from the lightning design system):

Sandbox version with correct styling Sandbox version with correct styling

Production version with mising styles enter image description here

As you can see, the production version seems to be bland and missing a bunch of table styles. Both are running the exact same code, with the standard styles removed from the Visualforce page.

Is there anything I am missing? I tried to look for updates but I am a bit puzzled by this.

  • 1
    How are you linking the SLDS styles? extends="force:slds" or hardcoding to a certain version.. – Benjamin Pirih May 31 '17 at 18:38
  • Actually I used extends="force:slds" before embedding the component in a visualforce page, after which I changed it to the lightning out. I feared indeed that it would remove the lightning design styling but it was fine. I even made sure that nothing was cached. Upon deployment to production, only part of the style seems to be applied which I find odd (I would expect all or nothing I guess). – P. Lapointe May 31 '17 at 18:48
  • 1
    Are you using the new __ rather than the old -- styles? (ie if the css in your markup uses the new style definitions, then the older stylesheet in production work work on some of that. – Caspar Harmer May 31 '17 at 18:55
  • 1
    Are you production vs. sandbox different version? – Benjamin Pirih May 31 '17 at 19:16
  • Hmm that might be it indeed, they are Spring 17 and Summer 17, even though its a fresh full sandbox, I wrongly assumed they'd be identical. I am using the new ones from the lightning design website. – P. Lapointe May 31 '17 at 20:30

The Lightning Design System team recently made a change to the css that they output for a specific reason - -- chars in lightning components can't be commented out due to the way the xhtml parser interprets the file - so you were left with the choice of either replacing the -- chars (with say ^^) or pulling the markup completely.

The new markup gets around that problem by using __ instead.

However, at the moment, production css is still using the old -- css.

If you upload a new Lightning component to production using the new css style, it won't be understood as a valid css rule, so hence won't get the style you were after.

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.