How to create folder structure and less file imports for styling | Community
Skip to main content
A
Anonymous
February 21, 2019
Solved

How to create folder structure and less file imports for styling

  • February 21, 2019
  • 6 replies
  • 3993 views

Hello All,

I have created one site and its components but now I want to apply styling to my components.

I want to use .less or .scss files for styling.

So what should be the folder structure for styling and where should I import the main.less or main.scss files.?

Thank you

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by smacdonald2008

As you go through that document - esp sections 3 and 4 - you will learn how to work with LESS CSS and how to setup folders, etc.

6 replies

smacdonald2008
smacdonald2008
Level 10
February 21, 2019

This is all covered in the Weekend tutorial here:

Getting Started with AEM Sites - WKND Tutorial

smacdonald2008
smacdonald2008Accepted solution
Level 10
February 21, 2019

As you go through that document - esp sections 3 and 4 - you will learn how to work with LESS CSS and how to setup folders, etc.

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
February 21, 2019

Hi,

Please check client lib part at AEM WKND Tutorial

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

Tutorial

Getting Started with AEM Sites - WKND Tutorial

Arun Patidar
A
Anonymous
February 22, 2019

Thank you mate ..smacdonald2008 I have followed the same folder structure and get the CSS but how can I import my fonts and bootstrap in it?? and where should I put my bootstrap and fonts.

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
February 23, 2019

Hi,

You can import any file in css either by  using FileValut like snv from there you can do check-in checkout.

How to use the VLT Tool

or you can create files inside AEM (from CRXDE) and browse bootstrap or font in aem by clicking/editing jcr:data property.

There are bootstrap clientlibs are already shipped with AEM, please check if you can use same rather then uploading another set of files.

http://localhost:4504/libs/granite/ui/content/dumplibs.html

Arun Patidar
A
Anonymous
February 24, 2019

Thank you mate.. But I have import it from main.less file and Its worked.

Terms & ConditionsAccessibility statement

Loading footer...