Home SALESFORCELightning Web Component Summer 20 – Share CSS Styles Among Lightning Web Components

Summer 20 – Share CSS Styles Among Lightning Web Components

by Sakthivel Madesh

Summer 20 – Share CSS Styles Among Lightning Web Components

For this blog post & video described about to Sharing the CSS Styles among the Lightning Web Components. This feature available from Summer 20 Salesforce Release. We can add style in Lightning Web Components using CSS (Cascading Style Sheets) style.

In Lightning Web Components, we can apply styling with 4 ways now:

  • Applying Style using Inline CSS in LWC
  • Applying Style using External CSS file from Static resources
  • Create CSS file from LWC Component bundle level
  • Summer 20 > Common CSS module  (Summer 20)

Share CSS Styles in LWC and this applies to Lightning web components in Lightning Experience and all versions of the Salesforce app.

Applying Style using Inline CSS in LWC

Inline CSS for apply a style for a individual HTML element used to apply with HTML style attribute. Likely

 <h1 style=”color: rebeccapurple; font-weight: bold; “>Share CSS Styles Among Components</h1&gt;

Applying Style using External CSS file from Static resources in Lightning Web Component

Upload this external css file as a static resources and it will be included in Lightning web component while import the @salesforce/resourceUrl/ module from LWC JS File. likely

Uploaded the CSS File into Static Resources (Setup -> Static Resources -> LWCCommonCSS (Static Resource Name)

Example to Apply Static Resource Styles in Lightning Web Component

import { LightningElement } from ‘lwc’;
import lwcStyleResource from ‘@salesforce/resourceUrl/LWCCommonCSS’;
import { loadStyle } from ‘lightning/platformResourceLoader’;
export default class Demo29SharedCSS extends LightningElement {

connectedCallback() {
Promise.all([
loadStyle(this,lwcStyleResource)
]).then(() => {
alert(‘Files loaded.’);
})
.catch(error => {
alert(error.body.message);
});
}
}

Example to Apply Style  from Static Resources to AURA Component:
<ltng:require styles=”{!join(‘,’,
$Resource + ‘/LWCCommonCSS/CommonCSS.css’,
)}” />
Applying Style to Create CSS file in the Lightning Web Component bundle
This is another way adding CSS to individual lightning web components level.  We can add CSS to a lightning web component bundle by creating the new css file under the LWC Component Folder. Likely
Share CSS Styles Among Lightning Web Components – Summer 20 Salesforce Release Feature

with Summer ’20 it’s now easier to share CSS styles to to among different Lightning Web Components. Its called CSS-only module. A CSS-only module contains a CSS file and a configuration file/metadata file (only 2 files). Create a LWC Component then delete the HTML and JS file from the folder. (refer the screenshots for the CSS-only module file structure)

Create Lightning Component without HTML & JS File (like below):

commonCSS
->commonCSS.css
->commonCSS.js-meta.xml

Using this new summer 20 release features, we can create a consistent look and feel for Lightning web components by using a common CSS module.
Define styles in the CSS module, and import the module into the main lightning web components to share those styles.

/* import to the css only module to main LWC Component CSS file */
@import ‘c/commonStyle’;
/* Define other style rules for here */

Important Notes for Share CSS Styles Among Lightning Web Components:

  • we can import many common CSS module In main Lightning Web Component CSS file
  • Make sure to have both components saved under API version 49 or Above (Summer 20 release API Version is 49.0)
  • there seem to be a bug with Summer 20 release while deploying the components, when sharing a common CSS file with import function into another LWC component, so I hope Salesforce Team will fix this shortly, but we have the following workaround to deploy
    •  try to deploy both components all together (or) try to deploy with entire LWC folders (force-app/main/default/lwc)   from your explorer bar, right click the LWC folder and deploy (or) use with the SFDX command to deploy from Visual Studio Terminal  sfdx force:source:deploy –sourcepath C:\Workspace\SakthiLWCWeek3\SakthiLWCWeek3\force-app\main\default\lwc

Reference Links:

Share CSS Style Rules – https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_components_css_share

Summer 20 – Share CSS Styles Among Lightning Web Components Release Notes – https://releasenotes.docs.salesforce.com/en-us/summer20/release-notes/rn_lwc_css_share.htm

Learn MOAR: Lightning Web Components Features in Summer ’20 – https://developer.salesforce.com/blogs/2020/06/learn-moar-lightning-web-components-features-in-summer-20.html

 

Please check the below video for more info about Summer 20 – Share CSS Styles Among Lightning Web Components:

Reference Links from stackexchange:

https://salesforce.stackexchange.com/questions/310879/lwc-share-css-style-rules-doesnt-work

https://salesforce.stackexchange.com/questions/313786/share-css-styles-among-lightning-web-components-nested-css-not-working

https://salesforce.stackexchange.com/questions/315662/not-able-to-import-css-in-lwc-no-module-named-markup

You may also like

4 comments

Summer 20 – Share CSS Styles Among Lightning Web Components – TheBlogReaders.com | gigminds August 15, 2020 - 11:08 pm

[…] convenience. This articles was sourced from TheBlogReaders.com and the orginal source is located at http://theblogreaders.com/summer-20-share-css-styles-among-lightning-web-components/. We do not own this article nor we take ownership of content for this article. Please visit the […]

Reply
onlyfans hack premium September 8, 2020 - 5:30 am

Thanks very interesting blog!

Reply
canadian pharmaceuticals online September 16, 2020 - 6:51 pm

Hey there, You’ve done a great job. I’ll definitely
digg it and personally suggest to my friends. I’m confident they will be benefited from this website.

Reply
generic viagra 100mg September 29, 2020 - 4:02 am

Hello There. I found your blog using msn. That is a really neatly written article.
I’ll make sure to bookmark it and return to learn more of
your helpful info. Thank you for the post. I will certainly comeback.

Reply

Leave a Comment