Generate clientlibraries for each component and place them in respective component folder under ui apps instead of single folder clientlibs
Example folder structure:
/myComponent
/clientlib
/css
styles.css
/js
setup.js
css.txt
js.txt
.content.xml
.content.xml
myComponent.html
css.txt
#base=css
styles.css
js.txt
#base=js
setup.js
/clientlib/.content.xml
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:ClientLibraryFolder"
categories="[myProject.myComponent]"/>
/myComponent/myComponent.html
<div>
...
<div>
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
data-sly-call="${clientlib.all @ categories='myProject.myComponent'}"/>
This will put the CSS & JS files below the HTML of the component. Alternatively, you could include the client-library in another client-library:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:ClientLibraryFolder"
categories="[myProject.all]"
embed="[myProject.myComponent]"/>
You could have this myProject.all
client-library included in the <head> of your site or wherever else you want.