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 https://releasenotes.docs.salesforce.com/en-us/summer20/release-notes/rn_lwc_css_share.htm and https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_components_css_share.

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 as "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,
Ritik