5

I have created a Lightning web component named commonStyleSheets and deleted html, JS file and kept only CSS file as shown in the below image.

enter image description here

Now if I import it by using 'c/commonStyleSheets' in any other lighting component's CSS

enter image description here

I am keep getting below error

enter image description here

I have deployed the commonSyleSheets component on my sandbox but still keep getting the above error, does anyone have any idea to solve this issue in a sandbox?

Improve this question
2

2 Answers 2

Reset to default
5

Indeed, there seem to be a bug with Summer 20 release, when sharing a common CSS file with import function into another LWC component.

Found another workaround : always deploy the CSS component together with the child component.

So in your example, the commonStyleSheets component must contain only the CSS and meta xml file.

Let's say the child component is called myComponent, run the following command to deploy both css component and child component, then it will deploy successfully.

sfdx force:source:deploy -p "force-app\main\default\lwc\commonStyleSheets", "force-app\main\default\lwc\myComponent"

You need to have both components saved under API version 49.

Everytime you make changes in the child component myComponent file(s), then you will have to run the above command again to deploy both components together.

Improve this answer
4

Did some play-around and found there is apparently a bug in css @import or in metadata deploy. Here is how you can reuse CSS:

  1. Make sure the components are of API 49.0.
  2. Create the reusable style sheet with js, meta and css files. Deploy. enter image description here
  3. Now import this in the component css file you need. As you have .js file, it will not complain about the module. Deploy.

enter image description here

  1. Now if you browse this component you will get error: (since the import is in CSS which is static in nature) enter image description here

  2. So, you need to remove the commonStyleSheets.js file and deploy again. enter image description here

Now, if you browse the component again, it will render properly.

Congrats! now you are able to reuse CSS!

Note: This bug is present as of Summer`20. This may be resolved in subsequent release patches or major release. As pointed by @Arthlete, you will need to repeat these steps every time you need to modify consumer components - its kind of annoying presently.

Make sure you have default export in 2nd step:

import { LightningElement } from 'lwc';

export default class CommonStyleSheets extends LightningElement {}
Improve this answer
5
  • I posted this as a solution as well the other day. However it only works until you need to modify the component where you imported the css. As soon as you try to deploy the consumer component you will get an error that the css component doesn't exist.
    – Arthlete
    Commented Aug 2, 2020 at 9:45
  • Thank you for your answer, I did exactly as mentioned in your answer created a commonStyleSheets component with JS, CSS and Meta file and then import it where it required and still deploy failed with same error nothing changed
    – gs650x
    Commented Aug 2, 2020 at 9:49
  • @Arthlete. yes, you need the JS file every time you are deploying - kind of annoying, and again remove it after changes.
    – salesforce-sas
    Commented Aug 2, 2020 at 10:27
  • @gs650x Just check that you have export as you created js file later - this is definitely working - but the catch is it will be annoying every time you need to modify something in consumer component
    – salesforce-sas
    Commented Aug 2, 2020 at 10:29
  • 1
    @Arthlete added this point in answer
    – salesforce-sas
    Commented Aug 2, 2020 at 10:31

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .