Lightning Components Developer’s Guide

Getting Started
Creating Components
Communicating with Events
Creating Apps
App Basics
Styling Apps
Using External CSS
Vendor Prefixes
Using JavaScript
JavaScript Cookbook
Using Apex
Using Object-Oriented Development
Using the AppCache
Controlling Access
Distributing Applications and Components
Debugging
Reference
PDF

Newer Version Available

This content describes an older version of this product. View Latest

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>:

1<ltng:require styles="/resource/resourceName" />

resourceName is the Name of the static resource. Note that the framework doesn’t currently support the $Resource global variable available in Visualforce. In a managed packaged, the resource name must include the package namespace prefix, such as /resource/np_resourceName.

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.
Loading Order
The styles are loaded in the order that they are listed.
One-Time Loading
The styles only load once if they are 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 “What is a Static Resource?” in the Salesforce online help.

Styling Components for Salesforce1

To prevent styling conflicts in 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.
1<ltng:require styles="/resource/bootstrap"/>
2<div class="myBootstrap">
3    <c:myComponent />
4    <!-- Other component markup -->
5</div>

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.

Note