Missing CSS .

AEMnewbie

22-08-2020

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 .

Accepted Solutions (1)

Accepted Solutions (1)

Shashi_Mulugu

MVP

24-08-2020

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

Answers (4)

Answers (4)

Arun_Patidar

MVP

24-08-2020

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

Ravi_Pampana

MVP

22-08-2020

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.

 

 

 

 

Nikhil-Kumar

MVP

24-08-2020

@AEMnewbie ,

As mentioned by @Arun_Patidar 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