Using External CSS

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

1<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.

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.

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

Note

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.

1<ltng:require styles="{!$Resource.bootstrap}"/>
2<div class="myBootstrap">
3    <c:myComponent />
4    <!-- Other component markup -->
5</div>