+ Start a Discussion

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

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.


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.