Missing CSS .

[AEMnewbie]

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 .

[Ravi_Pampana]

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.

[AEMnewbie]

@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 

[Shashi_Mulugu · Accepted solution]

@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''}"/>

[AEMnewbie]

Hello @Shashi_Mulugu .. I tried adding that .. Now i see all my component clientlib in the network tab.. but nothing in the response

[Shashi_Mulugu]

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

[AEMnewbie]

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

#base=css
articlefeed.less

[arunpatidar]

try with

#base=less
articlefeed.less

[Shashi_Mulugu]

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

[arunpatidar]

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

[AEMnewbie]

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

[arunpatidar]

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

[Nikhil-Kumar]

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

Thanks,
Nikhil

[AEMnewbie]

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