Background: We currently have several lightning components our community that reference several static resources. To load the static resources, I am using <ltng:require> component.

Issue: Let's assume that I use Salesforce Lightning Design System in one on my components. So I load it using <ltng:require>. Then, place this in one of my pages on the community, let's say on Home , then i create another page Group and have place some more components on this page which can be standard or custom. Now if i access the Group page from Home, some of the styles from the stylesheets loaded in Home page are being set to components on this page.

Scenario: I visit the community and I am routed to the Home Page, now open the Sources tab in Chrome Devtools and check the resources that are loaded, we have the Salesforce Design System loaded. enter image description here

Now I go the new page and inspect the components to see what CSS properties are applied, and i see that a few of the properties from the lightning design system are added to the component on this page.

Now this is an issue if I go to the Home Page and then go to the Group Page. If i visit the Group Page directly, I have no issue of this kind, because the resource was never loaded.

Because of this, CSS appplied is very inconsistent and is causing a few issues. In the example below i go the page directly, there is no issue. Buf if i launch the same page by first going to Home Page, one of the buttons in the modal has a different color applied to it.

Example: enter image description here

Some more info on the org:

Community Template: Napili

Version : Winter 17.

Locker Service : Not Enabled.

Access Check Critical Update: Enabled


You must log in to answer this question.