How to use critical-css-generator in Magento2?

Question

Does anyone know how one is suppose to correctly implement critical-css-generator to auto-generate ciritcal.css files in Magento2? I tried to replicate the instructions here: https://www.rohanhapani.com/how-to-enable-and-generate-css-critical-path-in-magento-2/

I have added this block of code

const critical = require('critical-css-generator');
critical.generate({
    url: 'https://<my website>',
    path: '/var/www/html/m240/app/design/frontend/<my-theme>/web/css/test_critical.css',
    viewport: true
});

insdie module.exports in the Gruntfile.js. But when I run grunt exec this error occurred in the console:

no exec targets found.

and sometimes seen this error:

Unable to resolve source file for frontend/<my-theme>/en_us/css/styles-l.css.less

Where is it getting this styles-l.css.less?

Can anyone help? I can not find any tutorials online.

What do you think is the best way to generate critical css files in Magento 2?

Answer 1

In your case first, you need to successfully install grunt if not then first install grunt then run the command grunt exec refer to this link for install grunt in Magento 2.

https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/css-topics/css_debug.html