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

Is it possible to create component specific clientlibs in AEM6.5 Webpack?

vidhu
Level 1
Level 1

I am using AEM 6.5 ui.frontend webpack. Here if I compile scss to css it will complie in clientlibs-site/site.css. But I want component scss files to compile at the component level, I don't one one css file for all the components. Is this possible in Webpack? If yes, then how I can configure this.

2 Replies
Suraj_Kamdi
Community Advisor
Community Advisor

@vidhu 

Yes, it is possible to create a separate component-specific clientlib folder using ui.frontend module.

 

Create separate <component-name>clientlib.config.js

and set the clientlib path as follows

const CLIENTLIB_DIR = path.join(
__dirname,
'..',
'ui.apps',
'src',
'main',
'content',
'jcr_root',
'apps',
'aem-project',
'components',
'component-name'
'clientlibs'
);

also, you need o update the respective module's configuration in the as same as clientlib.config.js file.

 

 

vidhu
Level 1
Level 1

Hi @Suraj_Kamdi 

 

But this solution will work only for one or few components. If I have more than 15 components then I have to manually write the config. Is this any way it will automatically pick the sass component files and compile in component client-libs.