Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.

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

Avatar

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

Avatar

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.

 

 

Avatar

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.