applying styles to several html templates with single css file

Question

I have we component lets say called orderFlow. Inside there is obviously orderFlow.html template file, orderFlow.js and also I have added orderFlow.css file. Additionally I have created few html templates inside that folder that I render depending on the state of the app lets say. My problem is that when I define some styling rules inside that css file i created, only the default template (with the same name) renders the styles. all the other templates don't apply the styling when they are rendered. If I have created separate css files for each template matching the names of the file it would be ok.

However I have some generic styles that I want to actually to all of the templates and duplicating all these styles for each template seems bad to me. Is there any wy that I could use single css file and target all the templates within my component folder?

Answer 1

From winter'20, you can Share CSS style rules.

1. Create a Lightning web component that contains only a CSS file.

cssLibrary component (with only CSS file):

cssLibrary
   └──cssLibrary.css

/* cssLibrary.css */

h1 {
    font-size: xx-large;
}

In the CSS file of another Lightning web component, import the style rules.

myComponent:

myComponent
   ├──myComponent.html
   ├──myComponent.js
   ├──myComponent.js-meta.xml
   └──myComponent.css

/* myComponent.css */

@import 'cssLibrary.css';

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

<template>
  <h1>Words to the Wise</h1>
  <slot></slot>
</template>