0

I'm trying to create a consistent look and feel for Lightning web components by using a common CSS module. For this, I have followed the solutions given in the summer 20 release notes and the LWC developer docs

Now, if I'm creating css file in the below structure

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

then, when I'm calling this cssLibrary in my main component c:compositionBasics as @import 'c/cssLibrary', I'm getting the error

**force-app\main\default\lwc\compositionBasics\compositionBasics.js  No MODULE named markup://c:cssLibrary found : [markup://c:compositionBasics]**

while, if I'm creating the files as (added JS and HTML files as well, just like any other lwc component)

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

then I'm able to save the compositionBasics component (NO errors) but my CSS is not getting reflected.

Note: detailed code can be found in https://github.com/trailheadapps/lwc-recipes/tree/master/force-app/main/default/lwc/compositionBasics (My folder structure of compositionBasics is also exactly same)

Please help! Do let me know if I'm missing anything in here. Also let me know if for nesting a css @import 'c/cssLibrary'; is not a correct way.

Best, Rumit

1
  • point to be noted here is if I'll put that CSS in my main component (compositionBasics) then the css works, meaning there is no problem with code of the css, the only problem is that CSS is not getting nested from cssLibrary to compositionBasics. I have also tried the same thing with different component and CSS names but no luck. – user43598 Jul 24 '20 at 9:51
0

You didn't say when you are seeing this error; I've run into the same error when pushing code with sfdx force:source:push, when trying to push a css file that includes an @import directive. And after trying a number of changes, I think I've found the issue. It appears that you see this error if you do not push the imported CSS file at the same time you push the CSS file which does the importing (i.e., if there are no changes to push).

If you make an edit to your cssLibrary.css file so that sfdx force:source:status shows local changes for both cssLibrary.css and compositionBasics.css at the same time, force:source:push should succeed.

3
  • Thanks, @Jason Clark, "at the same time" seems to do the magic. Do you know the reason behind this? I mean, why it is letting me push successfully when both components are getting pushed at the same time while it is giving me the error while using one at a time? – user43598 Jul 30 '20 at 21:26
  • @user43595 it's clearly a bug; my guess it that when you push LWC it runs it through a validation step and it's not passing the css dependencies into the validation step unless they were also pushed. I'm going to try to file a bug (github.com/forcedotcom/cli), but I'll need to find time to create repro steps & repository (or repro steps for an existing repo). – Jason Clark Jul 30 '20 at 21:39
  • I submitted this bug, maybe you can add to it: github.com/forcedotcom/cli/issues/492 – womanwhodevs Aug 3 '20 at 17:44

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.