Using External CSS

To reference an external CSS resource that you’ve uploaded as a static resource, use a <ltng:require> tag in your .cmp or .app markup.

Here’s an example of using <ltng:require>:

<ltng:require styles="{!$Resource.resourceName}" />

resourceName is the Name of the static resource. In a managed packaged, the resource name must include the package namespace prefix, such as $Resource.yourNamespace__resourceName. For a stand-alone static resource, such as an individual graphic or script, that’s all you need. To reference an item within an archive static resource, add the rest of the path to the item using string concatenation.

Here are some considerations for loading styles:

Loading Sets of CSS
Specify a comma-separated list of resources in the styles attribute to load a set of CSS.
Note

Note

Due to a quirk in the way $Resource is parsed in expressions, use the join operator to include multiple $Resource references in a single attribute. For example, if you have more than one style sheet to include into a component the styles attribute should be something like the following.

styles="{!join(',', 
    $Resource.myStyles + '/stylesheetOne.css', 
    $Resource.myStyles + '/moreStyles.css')}"

Loading Order
The styles are loaded in the order that they are listed.
One-Time Loading
The styles load only once, even if they’re specified in multiple <ltng:require> tags in the same component or across different components.
Encapsulation
To ensure encapsulation and reusability, add the <ltng:require> tag to every .cmp or .app resource that uses the CSS resource.

<ltng:require> also has a scripts attribute to load a list of JavaScript libraries. The afterScriptsLoaded event enables you to call a controller action after the scripts are loaded. It's only triggered by loading of the scripts and is never triggered when the CSS in styles is loaded.

For more information on static resources, see “Static Resources” in the Salesforce online help.

Styling Components for Lightning Experience or Salesforce1

To prevent styling conflicts in Lightning Experience or Salesforce1, prefix your external CSS with a unique namespace. For example, if you prefix your external CSS declarations with .myBootstrap, wrap your component markup with a <div> tag that specifies the myBootstrap class.
<ltng:require styles="{!$Resource.bootstrap}"/>
<div class="myBootstrap">
    <c:myComponent />
    <!-- Other component markup -->
</div>
Note

Note

Prefixing your CSS with a unique namespace only applies to external CSS. If you’re using CSS within a component bundle, the .THIS keyword becomes .namespaceComponentName during runtime.