10

Here is my situation, I have two (and soon more) LWC, inside each component, I have the classic : html, css, js and xml.

In my case, the first LWC is having many css properties in common with the other LWC : color of buttons, same font, etc.

I want to have a global CSS out and to that make all LWC share some common properties. How to do that ?

Same think for JS.

Additional information : I am using full-custom classes css (and my own js), I do not use any element from the lightning Library.

1
8

The easiest mechanism for sharing JS and CSS code between LWCs across a single project is essentially create an LWC for each (the JS and the CSS).

Each LWC contains just the code artifact for the JS or CSS code.

In other words, they're LWC's without HTML templates. The one will have your XML metadata descriptor and a JS module, the other will have the XML descriptor and the CSS file.

There are instructions for how to construct and consume these in the LWC documentation with an example each for CSS and for JS.

There is an example of this in the LWC Recipes sample app with the component importing JS from another module in the project.

Reading your comment above, I'd say that the best architecture for you is a larger scale library that encapsulates all your CSS assets (and the images that go with them) into a component that's consumed across your project. You might even want to look at packaging it as its own unmanaged package so you can simply install it using sfdx force:package:install. That way, the entire CSS library is its own project with its own development lifecycle.

5

Yes, you can.

To share CSS style rules, create a module that contains only a CSS file. Import the style rules from that CSS file into the CSS files of other Lightning web components.

You can import style rules from multiple 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.

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

cssLibrary
   ├──cssLibrary.css
   └──cssLibrary.js-meta.xml

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

/* myComponent.css */

@import 'cssLibrary.css';

/* Other style rules for myComponent here */

Refer | Playground

16
  • Thank you Rahul, yes, i forgot to say it, but all my lwc are custom (all css classes are cutom) i do not use lightning graphics Apr 2 '20 at 8:46
  • @BestAboutMe Actually there is a better way. The static resource you should use only when you want to override some standard component CSS. The recommended way is you can create one component as CSS library and refer that in all other components. Apr 2 '20 at 8:49
  • 1
    Did you try this? I added this and the XML and it doesn't work Jun 26 '20 at 16:01
  • 1
    Your example without the xml file doesn't even let the component deploy (Cannot find Lightning Component Bundle), if i add the xml file iI can't do the deploy either (No base file for markup: // c: css), could you confirm me that in a scratch org for example, using api version 49, does this work for you without problems?
    – Pirata21
    Jun 26 '20 at 16:57
  • 1
    Yes, @rahulgawale Jul 24 '20 at 17:33
3

Apart from the solutions mentioned till now, another way to achieve this would be create a static resource and keep your entire css style rules and images in it. You will have to load static resource once in the outer most component i.e. parent component. Styling will get applied to child components when they are rendered.

2

If you're creating a new community, you can always use the community's global css. Beware that this solution could overwrite any local css styling set on the component.

for more information: https://developer.salesforce.com/docs/atlas.en-us.communities_dev.meta/communities_dev/communities_dev_customize_css.htm

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.