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>

Answer 2

In case you are still wondering, you need to create additional css files for each of the html ones.

From Developer Guide:

To reference CSS from an extra template, the CSS filename must match the filename of the extra template. For example, templateTwo.html can reference CSS only from templateTwo.css. It can’t reference CSS from miscMultipleTemplates.css or templateOne.css.