Share CSS Style Rules

Create a consistent look and feel for Lightning web components using a common CSS module. Define styles in the CSS module, and import the module into the components that you want to share styles.

You can import one or more CSS modules. The imported style rules are applied to the template just like non-imported style rules. Lightning Web Components supports the CSS cascade algorithm.

For more information about @import, see MDN web docs: @import. MDN lists two syntax statements:@import {url} and @import {url list-of-media-queries}. LWC doesn’t honor the {list-of-media-queries}.

  1. Create a Lightning web component that contains a CSS file and a configuration file. The folder and filenames must be identical. This component is your CSS module.

  2. Define the style rules in the CSS file.

  3. The configuration file requires only these tags.

  4. In the CSS file of a Lightning web component, import the CSS module.

  5. Imported style rules are applied to the template just like non-imported style rules. All style rules cascade. In the myComponent.html template, the text in the <h1> tag uses the xx-large style defined in cssLibrary.css.

You can play with the code in a playground at lwc.dev/guide/css.

See Also