How to create folder structure and less file imports for styling | Community
Skip to main content
Anonymous
Feb 21, 2019 7:45 AM UTC
Solved

How to create folder structure and less file imports for styling

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.
smacdonald2008
smacdonald2008Accepted solution
Level 10
Feb 21, 2019 2:48 PM UTC

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.

View reply

6 replies

Anonymous
Feb 24, 2019 7:21 AM UTC

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

Translate
arunpatidar
arunpatidar
New Participant
Feb 23, 2019 12:40 PM UTC

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

Translate
Arun Patidar
Anonymous
Feb 22, 2019 4:48 AM UTC

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.

Translate
arunpatidar
arunpatidar
New Participant
Feb 21, 2019 3:43 PM UTC

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

Translate
Arun Patidar
smacdonald2008
smacdonald2008Accepted solution
Level 10
Feb 21, 2019 2:48 PM UTC

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.

Translate
smacdonald2008
smacdonald2008
Level 10
Feb 21, 2019 2:46 PM UTC

This is all covered in the Weekend tutorial here:

Getting Started with AEM Sites - WKND Tutorial

Translate
Terms & ConditionsAccessibility statement

Loading footer...