I have developed a lightning component and it was called from lightning application. In application i extended "force:slds" and lightning properties are working fine when i'm trying to display lighntning component in my visualforce page for that in application i extended "extends="ltng:outApp".

Here is the problem generally lightning doesn't support multiple inheridence so for that i removed the "force:slds" after that lightning properties are not applying to application and displayed blank page .

how should i overcome this any suggestions?

This is my vf page :::

<apex:page >

<apex:includeLightning />

 <div id="PortalContainer" />
       $Lightning.use("c:PortalApp", function() {
       function(cmp) {

        console.log('Component created, do something cool here');


Thanks In Advance

  • Hi sekhar, if the below post helped answer your question, consider accepting it as an answer. You have several posts with answers, yet you don't seem keen on accepting any. Thanks
    – glls
    Nov 3, 2017 at 14:49

1 Answer 1


You need to include the Lightning CSS, which is not provided by apex:includeLightning (this provides only the JavaScript file). Instead, you need to also use apex:slds, which will bring in the SLDS CSS. By having these two elements separated, it allows you to use Lightning components without being forced in to SLDS, and you can use SLDS without needing to write a component (e.g. if you wanted SLDS-looking Visualforce, or Angular, or something else).

You must log in to answer this question.

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