7

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.

7

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.

| improve this answer | |
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

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

| improve this answer | |
  • 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 – BestAboutMe Apr 2 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. – rahul gawale Apr 2 at 8:49
  • Hi Rahul, thank you again, I wanted to import of cssLibrary.css inside another lwc (other thant the app module on the Playground) but it doesn't work, is it possible to import same css in many lwc ? – BestAboutMe Apr 7 at 13:40
  • @BestAboutMe Yes, it is unlike the LWC in Salesforce, playground needs exact relative address for the CSS file – rahul gawale Apr 7 at 15:07
  • I see, but in my real project, I'm having troubles with the new LWC (css library), the error I have is : "Cannot find Lightning Component Bundle sharedStyle" means I need to add xml meta to this LWC and not only a css file – BestAboutMe Apr 8 at 8:21
2

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.

| improve this answer | |
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

| improve this answer | |

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.