Adobe Experience Manager Sites & More

pranjalk4508722 · 9/6/18

hi everyone,

I started created one website on aem i created one component and add content in body.html file then i created clientlibs folder under apps/myproject and add css and js files in that folder and refrence this css files and js files in body.html file

but on my page css and js is not working only contents are shown in scattered way

thanks in advance

Manish_Singh_1 · 9/6/18

Hi pranjalk45087228,

If on AEM 6.4, did you use allowProxy when using clientlibs? On what version of AEM are you one? Also, did you declare the categories of clientlibs folder?

Regards,

Manish Singh

pranjalk4508722 · 9/6/18

yeah i used allowed proxy and categories also

Ankur_Khare · 9/6/18

Could you please let us know-

Which version u are using.

where did u register the clientlibs.

Could u share the body.html complete file.

I hope u have created a sample project using maven archtype which will give you a sample page working and u can understand the logic as well like how it works.

pranjalk4508722 · 9/6/18

i am using aem 6.4

i share my body.html file

<!DOCTYPE html>

<head>

<!-- Stylesheets

============================================= -->

<!-- Document Title

============================================= -->

<title>Derien | Home</title>

</head>

nitin

<!-- Document Wrapper

============================================= -->

<!-- Header

============================================= -->

<!-- Logo

============================================= -->

</div>

<!-- Primary Navigation

============================================= -->

<li><a href="#" data-href="#section-about"><div>About us</div></a></li>

<li><a href="#section-services"><div>Services</div></a>

<ul>

<li><a href="#section-services"><div>Mobile Application Development </div></a></li>

<li><a href="#section-services"><div>E-commerce and Web Development</div></a></li>

<li><a href="#section-services"><div>Custom Development</div></a></li>

<li><a href="#section-services"><div>DevOps & Infrastructure </div></a></li>

<li><a href="#section-services"><div>CUSTOMER EXPERIENCE</div></a></li>

<li><a href="#section-services"><div>IOT ( INTERNET OF THINGS)</div></a></li>

<li><a href="#section-services"><div>ANALYTICS </div></a></li>

<li><a href="#section-services"><div>E-LEARNING AND CONTENT MANAGEMENT </div></a></li>

<li><a href="#section-services"><div>ARTIFICAL INTELLIGENCE AND ROBOTICS</div></a></li>

</ul>

</li>

<li><a href="#" data-href="#section-career"><div>Career</div></a></li>

<li><a href="#" data-href="#footer"><div>Contact</div></a></li>

</ul>

</nav>

</div>

</header>

<!--

#################################

- THEMEPUNCH BANNER -

#################################

-->

<div class="tp-caption customin ltl tp-resizeme"

data-x="280"

data-y="200"

data-width="900px"

data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;s:800;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"

data-speed="800"

data-start="1000"

data-easing="easeOutQuad"

data-splitin="none"

data-splitout="none"

data-elementdelay="0.01"

data-endelementdelay="0.1"

data-endspeed="1000"

data-endeasing="Power4.easeIn" style="z-index: 3;">

</div>

<div class="tp-caption customin ltl tp-resizeme"

data-x="center"

data-y="360"

data-width="900px"

data-whitesapce="normal"

data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;s:800;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"

data-speed="800"

data-start="1250"

data-easing="easeOutQuad"

data-splitin="none"

data-splitout="none"

data-elementdelay="0.01"

data-endelementdelay="0.1"

data-endspeed="1000"

data-endeasing="Power4.easeIn" style="z-index: 3;">

<p class="lead" style="text-align:center">Provide world class software on digital platforms and leading edge business solutions that are optimized to enhance customer's productivity and profitability and carry on business in the field of Information Technology, Artificial Intelligence, Software etc.

</p>

</div>

<!--

<div class="tp-caption customin ltl tp-resizeme"

data-x="470"

data-y="450"

data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;s:800;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"

data-speed="800"

data-start="1550"

data-easing="easeOutQuad"

data-splitin="none"

data-splitout="none"

data-elementdelay="0.01"

data-endelementdelay="0.1"

data-endspeed="1000"

data-endeasing="Power4.easeIn" style="z-index: 3;"><a href="#" class="button button-border button-light button-circle nomargin"><span>View our Works</span> <i class="icon-angle-right"></i></a></div>

-->

</li>

<div class="tp-caption customin ltl tp-resizeme"

data-x="280"

data-y="200"

data-width="900px"

data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;s:800;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"

data-speed="800"

data-start="1000"

data-easing="easeOutQuad"

data-splitin="none"

data-splitout="none"

data-elementdelay="0.01"

data-endelementdelay="0.1"

data-endspeed="1000"

data-endeasing="Power4.easeIn" style="z-index: 3;">

</div>

<div class="tp-caption customin ltl tp-resizeme"

data-x="center"

data-y="360"

data-width="900px"

data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;s:800;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"

data-speed="800"

data-start="1250"

data-easing="easeOutQuad"

data-splitin="none"

data-splitout="none"

data-elementdelay="0.01"

data-endelementdelay="0.1"

data-endspeed="1000"

data-endeasing="Power4.easeIn" style="z-index: 3;">

<p class="lead" style="text-align:center">To be a catalyst in the creation and delivery of innovative workforce solutions and services that enable our clients to win in the changing world of work

</p>

</div>

<!-- <div class="tp-caption customin ltl tp-resizeme"

data-x="493"

data-y="450"

data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;s:800;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"

data-speed="800"

data-start="1550"

data-easing="easeOutQuad"

data-splitin="none"

data-splitout="none"

data-elementdelay="0.01"

data-endelementdelay="0.1"

data-endspeed="1000"

data-endeasing="Power4.easeIn" style="z-index: 3;"><a href="#" class="button button-border button-circle t500 nomargin"><span>Check Out</span> <i class="icon-angle-right"></i></a></div> -->

</li>

</ul>

</div>

</div>

</section>

<!-- Content

============================================= -->

.row.equal {

display: flex;

flex-wrap: wrap;

}

}</style>

<p style="font-size:13px; text-align: center;">Innovation Technologies</p>

<p class="lead divcenter bottommargin center" style="max-width: 800px;">Derien Innovation Technologies is a young organization, nestled in the heart of Gurgaon , India. We will soon be expanding our operations in other parts of India. Outside of India, we have started building our impression in USA, UK, Europe, Singapore, and entire APAC. We serve both large and small organization across all industry sectors through our brands and offerings </p>

<p class="bottommargin center" style="font-size: 16px; text-align:center;"><a href="#" data-scrollto="#section-services" data-easing="easeInOutExpo" data-speed="1250" data-offset="70" class="more-link">Learn more <i class="icon-angle-right"></i></a></p>

<h2 class="center uppercase t300 ls3 font-body">We are into Managed services, AMS, Consulting and Talent Acquisition</h2>

<div>

</span>

</div>

<h5 class="color-white">Managed Services and Consulting</h5>

</div>

</span>

<h5 class="color-white">AMS ( Application Management and Services) </h5>

</div>

</span>

<h5 class="color-white">Talent Acquisition</h5>

</div>

<h2 class="nobottommargin t300 ls1">Our services, people, processes and technologies helps drive efficiency, quality and cost savings</h2>

<h2 class="nobottommargin t300 ls1">Cornerstones of our work ethos</h2>

</div>

<!-- Portfolio Items

============================================= -->

</a>

<h3><a href="#">Trust</a></h3>

</div>

</article>

</a>

<h3><a href="#">Transparency</a></h3>

</div>

</article>

</a>

<h3><a href="#">On-Time and High Quality Delivery</a></h3>

</div>

</article>

</a>

<h3><a href="#">Customer Delight</a></h3>

</div>

</article>

</div>

</div>

<h2 class="divcenter font-body" style="max-width: 900px; font-size: 40px;text-align: center;">OUR SERVICES</h2>

</div>

</div>

<h3>Mobile Application and Development </h3>

</div>

</div>

<h3>E-Commerce and Web Development</h3>

</div>

</div>

<h3>Custom Development </h3>

</div>

</div>

<h3>Devops and Infrastructure</h3>

</div>

</div>

<h3>Customer Experience</h3>

</div>

</div>

<h3>IOT <br> ( Internet of Things)</h3>

</div>

</div>

<h3>Analytics</h3>

</div>

</div>

<h3>E-Learning and Content Management</h3>

</div>

</div>

<h3>Artifical Intelligence and Robotics</h3>

</div>

<h4 class="modal-title" id="myModalLabel">Mobile Application Development</h4>

</div>

<p>It is evident that the demand of mobile apps has spiralled in all businesses. We help you to be at the top of your game by designing and developing brilliant mobile applications</p>

<p>Our mobile app development team is creative and knowledgeable to accomplish your individual as well as business needs. With advanced tools and technology we are able to create highly customized mobile applications for consumer needs and enterprises </p>

<p>We are pioneers in building mobile apps – Any Platform And Device, Multi Language Out of Box, Hybrid connected apps with Mobile Bridge, and Video Streaming and Enterprise level Mobility Solutions</p>

</div>

<h4 class="modal-title" id="myModalLabel">Custom Development</h4>

</button>

</div>

<p>At Derien, we deliver custom enterprise applications for various industries such as telecommunications, retail, healthcare and travel by utilizing some of the most popular software technologies which includes but not limited to Microsoft .NET, Java/J2EE, PHP. </p>

</div>

<h4 class="modal-title" id="myModalLabel"> E-commerce and Web Development </h4>

</div>

<li>Bespoke web & e-commerce solutions using Hybris and other platforms</li>

<li>Customized ERP, HRMS, & CRM solutions for your day-to-day business</li>

<li>Cloud based solutions that are secured, flexible and scalable</li>

</ul>

</div>

<h4 class="modal-title" id="myModalLabel"> DevOps & Infrastructure</h4>

</button>

</div>

<li>Cloud hosting experience with authoritative knowledge and excellence </li>

<li>Pioneers in both AWS and Google </li>

<li>Simplify hosting and reduce the production level problems </li>

<li>Structured experience and expertise in DevOps, allows us to support world class Cloud platform to address the needs of the customer</li>

</ul>

</div>

<h4 class="modal-title" id="myModalLabel">Cloud</h4>

</button>

</div>

<li>Private, public or hybrid - all cloud app development services </li>

<li>Cloud-based automated solutions that provide safe, seamless and rapid migration of your business, enterprise and customer-centric applications to the cloud.</li>

<li>We use an integrated approach that combines business expertise with proven enterprise cloud technologies, to develop cloud-based applications. This enables our clients to make effective and efficient use of innovative cloud service technologies and modernize their business.</li>

</ul>

</div>

<h4 class="modal-title" id="myModalLabel">AMS (Application Management Service)</h4>

</button>

</div>

<li>L1, L2, L3 support</li>

<li> 24X7 managed services that include 4 key towers: Application support, Hosting & operation support, Infra monitoring, Security </li>

<li>24X7 in-person coverage </li>

</ul>

</div>

<h4 class="modal-title" id="myModalLabel">Managed Services and Consulting</h4>

</button>

</div>

<li>Our team of experts help you build a scalable IT strategy that fits your business ecosystem and aligns with your company’s initiatives and budget. We determine your needs, evaluate your vendor options, and help you develop a selection & implementation centre of excellence for your users.

</li>

<li> 24X7 managed services that include 4 key towers: Application support, Hosting & operation support, Infra monitoring, Security </li>

<li>24X7 in-person coverage </li>

</ul>

</div>

<h4 class="modal-title" id="myModalLabel">Talent Acquisition</h4>

</button>

</div>

<li>At Derien we strive to ensure our services are dedicated to support HR solution. Our in-house research and recruiting capabilities are varied.</li>

<li> We practice the latest systems & processes in the recruitment industry, and so have the ability to serve our customers with the relevant & quality profiles with a minimum lead-time. </li>

<li> Our highly trained search team delves into our widely spread network as well as existing database of skilled and experienced professionals to yield the best match of professionals. </li>

<li>Our staffing solutions are agile enough to meet the rapidly changing talent needs today </li>

<li>We have expertise to address resource needs at all levels in a career ladder. We also do mass hiring and team hiring within stipulated time . </li>

<li> Our team includes experienced consultants, who work across the key industry segments and functions to deliver the executive search service. </li>

<li>We follow a robust internal process which is time tested and which involves all the stake holders. </li>

</ul>

</div>

<h4 class="modal-title" id="myModalLabel">Engagement Model</h4>

</button>

</div>

<p><strong>Fixed Time & Cost</strong></p>

<li>As your offshore development partner we execute every project as our own with concrete milestones for costing and deliverables. In house management of project life cycle ensures deliverables are ready on the scheduled timelines. </li>

</ul>

<p><strong>Time & Material</strong></p>

<li> In this flexible and dynamic model we can address needs of your complex projects that are inclined to specification and design changes. We allow customers to modify project requirements as per upcoming market trends. </li>

</ul>

<p><strong>Contractual Billing </strong></p>

<li>Suitable for short-term projects and/or modules. The project/module is developed and tested in-house as per your requirement </li>

<li>Tap into our network and database of skilled, experienced professionals to pick and match to your niche requirements </li>

</ul>

<p><strong>Dedicated Billing</strong></p>

<li> Appropriate to implement customer specific solution with the help of our dedicated team, which includes resources & tools </li>

</ul>

<p><strong>Per Resource</strong></p>

<li>Tap into our network and database of skilled, experienced professionals to pick and match to your niche requirements</li>

</ul>

</div>

<h3>Offshore Development </h3>

<p>Engagement Models</p>

</div>

<p>IT Staff Augmentation</p>

</div>

<p>Choose us as your ODC</p>

</div>

<!--<ul class="list-unstyled">

<li>Engagement Models </li>

</ul>-->

</div>

<p>Innovation distinguishes between a leader and a follower</p>

Steve Jobs

<span>Apple Inc.</span>

</div>

<p>Innovation distinguishes between a leader and a follower</p>

Steve Jobs

<span>Apple Inc.</span>

</div>

<h2 class="divcenter bottommargin font-body" style="max-width: 900px; font-size: 40px;text-align: center;">Career</h2>

<p class="nobottommargin t300 ls1" style="font-size: 16px;">We are a dynamic, young organization ready to take on challenges and resolve them using our knowledge of technology and its trends.

</p>

At Derien, you’ll associate with confident leaders and together define solutions for our customers. As you grow with us, you’ll be inspired and challenged to be your best.

</p>

Choosing to grow with us will give you the opportunity to unleash your creativity and innovation to help our customers. Each day, you’ll work in an atmosphere that enables you to fulfil both professional and personal goals.

</p>

We are always looking for enthusiastic and hard working individuals who are penchant to excel in what they do and can add strength to our dynamic team. If you would like to be a part of our journey reach out to admin@derien-it.com

</p>

</div>

<h2 class="divcenter bottommargin topmargin font-body" style="max-width: 900px; font-size: 40px;text-align: center;">Our Partners</h2>

</div>

<!--<div id="section-subscribe">

<h2 class="divcenter bottommargin font-body" style="max-width: 900px; font-size: 40px;text-align: center;">Subscribe</h2>

</div>

<button class="button button-border button-circle button-light" type="submit">Subscribe Now</button>

</div>

</form>

</div>

</div>-->

</div>

</section>

<!-- Footer

============================================= -->

<h4 style="text-transform: uppercase;letter-spacing: 3px;font-weight: 300;">Contact Information</h4>

<strong>Registered Office:</strong><br>

Derien Innovation Technologies <br>Plot number-5, Sector-18, Electronic City, Gurugram, Haryana, India <br>

<abbr title="Phone Number"><strong>Phone:</strong></abbr> 0124-4665030<br>

<abbr title="Email Id"><strong>Email:</strong></abbr> <a style="color: #999;" href="mailto:we@derien-it.com">we@derien-it.com</a>

</address>

</div>

<strong>USA Office:</strong><br>

Derien Innovation Technologies <br>3 WALNUT STREET, RAMSEY, NEW JERSEY 07446, US<br>

<abbr title="Phone Number"><strong>Phone:</strong></abbr> (+1) 908 419 7342<br>

<abbr title="Email Id"><strong>Email:</strong></abbr> <a style="color: #999;" href="mailto:we@derien-it.com">we@derien-it.com</a>

</address>

</div>

</a>

</a>

</a>

</div>

<h4 style="color:#000;">Enquire Now</h4>

</div>

</div>

</div>

</div>

</div>

<button class="button button-border button-circle t500 noleftmargin topmargin-sm" type="submit" id="template-contactform-submit" name="template-contactform-submit" value="submit">Submit</button>

<!--<br>

<small style="display: block; font-size: 13px; margin-top: 15px;">We'll do our best to get back to you within 6-8 working hours.</small>-->

</div>

</div>

</form>

</div>

</div>

<span class="pull-right">Thanks to Krishnapriya Datta Gupta for our Logo Design</span>

</div>

</footer>

</div>

<!-- Go To Top

============================================= -->

<!-- External JavaScripts

============================================= -->

<!-- Google Map JavaScripts

============================================= -->

<!--<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>

<!-- Footer Scripts

============================================= -->

// Revolution Slider Scripts

var tpj=jQuery;

tpj.noConflict();

tpj(document).ready(function() {

var apiRevoSlider = tpj('.tp-banner').show().revolution(

{

sliderType:"standard",

jsFileLocation:"include/rs-plugin/js/",

sliderLayout:"fullscreen",

dottedOverlay:"none",

delay:16000,

startwidth:1140,

startheight:700,

hideThumbs:200,

thumbWidth:100,

thumbHeight:50,

thumbAmount:5,

navigation: {

keyboardNavigation:"off",

keyboard_direction: "horizontal",

mouseScrollNavigation:"off",

onHoverStop:"off",

touch:{

touchenabled:"on",

swipe_threshold: 75,

swipe_min_touches: 1,

swipe_direction: "horizontal",

drag_block_vertical: false

},

arrows: {

style: "hermes",

enable: true,

hide_onmobile: false,

hide_onleave: false,

tmp: '<div class="tp-arr-allwrapper"> <div class="tp-arr-imgholder"></div> <div class="tp-arr-titleholder">{{title}}</div> </div>',

left: {

h_align: "left",

v_align: "center",

h_offset: 10,

v_offset: 0

},

right: {

h_align: "right",

v_align: "center",

h_offset: 10,

v_offset: 0

}

},

touchenabled:"on",

onHoverStop:"on",

swipe_velocity: 0.7,

swipe_min_touches: 1,

swipe_max_touches: 1,

drag_block_vertical: false,

keyboardNavigation:"off",

shadow:0,

fullWidth:"off",

fullScreen:"on",

spinner:"spinner4",

stopLoop:"off",

stopAfterLoops:-1,

stopAtSlide:-1,

shuffle:"off",

autoHeight:"off",

forceFullWidth:"off",

hideThumbsOnMobile:"off",

hideNavDelayOnMobile:1500,

hideBulletsOnMobile:"off",

hideArrowsOnMobile:"off",

hideThumbsUnderResolution:0,

hideSliderAtLimit:0,

hideCaptionAtLimit:0,

hideAllCaptionAtLilmit:0,

startWithSlide:0,

});

apiRevoSlider.bind("revolution.slide.onchange",function (e,data) {

SEMICOLON.slider.revolutionSliderMenu();

});

}); //ready

jQuery(window).load(function(){

// Google Map

jQuery('#headquarters-map').gMap({

address: 'India, India',

maptype: 'ROADMAP',

zoom: 3,

markers: [

{

address: "#5, Sector-18, Electronic City, Gurugram, Haryana, India",

html: "#5, Sector-18, Electronic City, Gurugram, Haryana, India",

icon: {

image: "images/icons/map-icon-red.png",

iconsize: [32, 32],

iconanchor: [14,44]

}

],

doubleclickzoom: false,

controls: {

panControl: false,

zoomControl: false,

mapTypeControl: false,

scaleControl: false,

streetViewControl: false,

overviewMapControl: false

},

styles: [{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"administrative","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.country","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative.country","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative.country","elementType":"labels.text","stylers":[{"visibility":"simplified"}]},{"featureType":"administrative.province","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative.locality","elementType":"all","stylers":[{"visibility":"simplified"},{"saturation":"-100"},{"lightness":"30"}]},{"featureType":"administrative.neighborhood","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative.land_parcel","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"visibility":"simplified"},{"gamma":"0.00"},{"lightness":"74"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"landscape.man_made","elementType":"all","stylers":[{"lightness":"3"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}]

});

</script>

</body>

</html>

pranjalk4508722 · 9/6/18

i didnot create any maven project or archtype i simply code in crxe lite

Ankur_Khare · 9/6/18

I would suggest you to create a sample project using maven archtype and undestand how clientlib logic works.

Refer below link

Creating an Adobe Experience Manager 6.4 Project using Adobe Maven Archetype 13

pranjalk4508722 · 9/6/18

tell me one thing this body.html code in crxde lite all the contents shown on the page but when i go to page source in page then i am not able to see my this code how is it possible?

smacdonald2008 · 9/6/18

Here is an older community article built similiar to how you did it. See if this works. You should get a Blue UI by use of a CSS.

Scott's Digital Community: Submitting Adobe Experience Manager form data to custom Sling Servlets

Watch the video too.

smacdonald2008 · 9/6/18

The above article was a small example of use of Clientlibs. For a complete discussion - see this. In fact - we recommend that you go through all 6 sections. You will learn a lot - including use of CSS and clientlibs --

Getting Started with AEM Sites Part 3 - Client-Side Libraries and Responsive Grid

Manish_Singh_1 · 9/6/18

When you declare client libs in /apps in AEM 6.4, you have to access it via a proxy servlet. To do that, you have to define allowProxy =true in your client libs folder

Read this: Using Client-Side Libraries

Adobe Experience Manager Sites & More

My css is not visible in aem

Learn

Documentation

Community

Support

Resources

Adobe account

Adobe