How to share CSS style sheet in Lightning Web Component?

  In this blog post we will see "How to share CSS style sheet in Lightning Web Component".

1) If we want to share CSS style than we will need to create a module that contains only a CSS file.

2) After we create a module we can import the module into CSS file of any Lightning Web Component as shown below.

@import 'namespace/nameOfModule';

3) To create a module we will need to create a Lightning Web Component with only single CSS file as shown below.

cssLibrarySample.css

p{

    background-color:yellow;

    font-size: x-large;

}

Now, Let see how we can use the above module in our Lightning Web Component.

myComponentParent.html

<template>

    <p>

      Hi I am sample HTML file.

    </p>

 </template>

myComponentParent.js

import { LightningElement } from 'lwc';

export default class MyComponentParent extends LightningElement {}

myComponentParent.css

@import 'c/cssLibrarySample';

testApp.app

<aura:application>

<c:myComponentParent></c:myComponentParent>

</aura:application>

OUTPUT: