Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Missing CSS .

Avatar

Avatar
Validate 1
Level 1
AEMnewbie
Level 1

Likes

0 likes

Total Posts

82 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Applaud 5
View profile

Avatar
Validate 1
Level 1
AEMnewbie
Level 1

Likes

0 likes

Total Posts

82 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Applaud 5
View profile
AEMnewbie
Level 1

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)

Avatar

Avatar
Springboard
MVP
Shashi_Mulugu
MVP

Likes

224 likes

Total Posts

283 posts

Correct Reply

65 solutions
Top badges earned
Springboard
Bedrock
Validate 1
Applaud 100
Establish
View profile

Avatar
Springboard
MVP
Shashi_Mulugu
MVP

Likes

224 likes

Total Posts

283 posts

Correct Reply

65 solutions
Top badges earned
Springboard
Bedrock
Validate 1
Applaud 100
Establish
View profile
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)

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,346 likes

Total Posts

3,223 posts

Correct Reply

915 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,346 likes

Total Posts

3,223 posts

Correct Reply

915 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
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

Avatar

Avatar
Establish
MVP
Ravi_Pampana
MVP

Likes

190 likes

Total Posts

239 posts

Correct Reply

74 solutions
Top badges earned
Establish
Contributor
Shape 1
Ignite 5
Ignite 3
View profile

Avatar
Establish
MVP
Ravi_Pampana
MVP

Likes

190 likes

Total Posts

239 posts

Correct Reply

74 solutions
Top badges earned
Establish
Contributor
Shape 1
Ignite 5
Ignite 3
View profile
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.

 

 

 

 

Avatar

Avatar
Validate 1
Level 1
AEMnewbie
Level 1

Likes

0 likes

Total Posts

82 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Applaud 5
View profile

Avatar
Validate 1
Level 1
AEMnewbie
Level 1

Likes

0 likes

Total Posts

82 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Applaud 5
View profile
AEMnewbie
Level 1

24-08-2020

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

Avatar

Avatar
Validate 1
MVP
Nikhil-Kumar
MVP

Likes

243 likes

Total Posts

256 posts

Correct Reply

38 solutions
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back 5
Give Back 3
View profile

Avatar
Validate 1
MVP
Nikhil-Kumar
MVP

Likes

243 likes

Total Posts

256 posts

Correct Reply

38 solutions
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back 5
Give Back 3
View profile
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