Expand my Community achievements bar.

SOLVED

Missing CSS .

Avatar

Level 4

I created a small component , with some CSS.

1.CSS was created at  component/clientlib/less/x.less level

2. And then this file name was added in css.txt 

3. And an x component group was added.

4. Navigated to structure page customheaderlibs.html and noticed that it is referring to clientlib-base

5. Navigated to clientlibs folder and added my component x in the embed.

 

When i deployed my code changes and navigated to my page which uses this component, in the network tab under clientlib-base.css i dont see my component less css .

 

I am using AEM 6.5 service pack 6.5.4 . Not sure what else needs to be verified .

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@AEMnewbie Can you post a screenshot of how clientlib was setup so that we can see the structure and compare the files.

 

Also Can you try to add the Component Clientlib category directly to your customheaderlibs.html just to validate if it is loading/compiling the clientlib individually.

 

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientlib.css @ categories='clientlib.base, 'component.clientlib''}"/>

View solution in original post

13 Replies

Avatar

Community Advisor

Hi,

 

Can you provide where css.txt is added and the path how it is added to css.txt ?

 

Usually if we add like below it should work 

 

/apps/yourproject/components/yourcomponent/clientlibs/css/custom.less

/apps/yourproject/components/yourcomponent/clientlibs/css.txt - 

 

Content inside css.txt

     #base=css
      custom.less

 

clientlibs - should have jcr:primaryType "cq:ClientLibraryFolder" and should have categories added.

 

Also if less file is not formed properly (missing syntax) then the css wont generate and added to clientlib file.

 

 

 

 

Avatar

Level 4

@Ravi_PampanaThats exactly how i have it i was missing this #base=css i added it , but that didnt help. 

.article {
border:1px solid #ccc;
padding:0;
margin:0 5px 10px;
border-radius: 0 0 0 6px;
}

This is all i have in my less file 

Avatar

Correct answer by
Community Advisor

@AEMnewbie Can you post a screenshot of how clientlib was setup so that we can see the structure and compare the files.

 

Also Can you try to add the Component Clientlib category directly to your customheaderlibs.html just to validate if it is loading/compiling the clientlib individually.

 

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientlib.css @ categories='clientlib.base, 'component.clientlib''}"/>

Avatar

Level 4

Screen Shot 2020-08-24 at 4.26.59 AM.pngScreen Shot 2020-08-24 at 4.26.30 AM.pngHello @Shashi_Mulugu .. I tried adding that .. Now i see all my component clientlib in the network tab.. but nothing in the response

Avatar

Community Advisor
Then it is definitely a problem with component clientlib.. can you post your clientlib structure and css txt file

Avatar

Level 4

Screen Shot 2020-08-24 at 4.36.04 AM.png

Thats my less file .. inside my css.txt i have @Shashi_Mulugu 

#base=css
articlefeed.less

 

Avatar

Community Advisor

try with

#base=less
articlefeed.less



Arun Patidar

Avatar

Community Advisor
@AEMnewbie Change #base=less, basically it is the folder name relative to clientlib folder where we placed our css files.

Avatar

Community Advisor

Can you try to open base css in new tab and add ? mark at the end of the URL.

If everything setup correctly, there are possibility that -

1. Clientlibs is cached in the browser

2. clietlibs are cached in data folder crx-quickstart/launchpad/felix/bundles/bundle-x/data/outcache

3. Less file has some error

 

bundle-x is id of HTML clienlibs bundle



Arun Patidar

Avatar

Level 4
Hello @arunpatidar I tried that ..the base css loads fine with the ? but i dont see my changes in there.. And then i tried to navigate to crx-quickstart/launchpad/felix/bundles/bundle-x/data/outcache .. I dont see any bundles folder under felix and i am not sure how i could find the bundle-x id of html

Avatar

Community Advisor

I think, your less files are inside less folder not in css but you set css as base folder.
Try with try with

#base=less

articlefeed.less

 



Arun Patidar

Avatar

Community Advisor

@AEMnewbie ,

As mentioned by @arunpatidar and @Shashi_Mulugu. Try adding #base=less. That should definitely  resolve the issue.

If issue still exists then try adding component's x category as part of Page policy, as you are using 6.5.4 with editable templates.
I faced similar issue on 6.5.5 but once I added it as part of Page policy it was picking up the styling from the clientlibs defined.

Nikhil_Kumar_AEM_1-1598279535321.png

Thanks,
Nikhil

 

Avatar

Level 4

@arunpatidar @Shashi_Mulugu Thanks Arun and Shashi.. CSS finally worked the issue was #base=less instead of #base=css