Share CSS Styles Among Lightning Web Components (Nested CSS) - not working

Question

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

Answer 1

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.