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
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.