Magento 2 less compilation error while setup:static-content:deploy

Question

After updating to Magento 2.1.16 on my staging server with nginx server and php7.0 I am facing issue in compiling less and css files. The files styles-l.css and styles-m.css are missing - not generated.

During static contend deploy I get errors:

Compilation from source: /srv/www/rmstaging/public_html/vendor/magento/theme-frontend-blank/web/css/styles-l.less

Compilation from source: frontend/Smartwave/porto_rtl/en_US/css/styles-l.less variable @modal-popup-breakpoint-screen__m is undefined in file /srv/www/rmstaging/public_html/var/view_preprocessed/css/frontend/Smartwave/porto_rtl/en_US/Magento_Checkout/css/source/module/checkout/_tooltip.less in _tooltip.less on line 11, column 41

I tried many solution including on given in https://stackoverflow.com/questions/50764127/magento-2-less-compilation-error-while-setupstatic-contentdeploy-and-frontend given by @Ashsih Raj. But did not work either.

I had the same issue on localhost but that was fixed mysteriously. I think the only change is that on my localhost I compiles using PHP7.1

Please advise.

• Magetop E-commerce: You can delete this file if it is not necessary
• Abid Malik: Which file should be deleted?
• Magetop E-commerce: Delete file .less you have the error
• Abid Malik: @VuTranKien Did that already but no use.

Answer 1

For all Porto Theme users upgrading to Magento 2.3:

Edit the following files (also other language codes if available):

app/design/frontend/Smartwave/porto/Magento_Checkout/web/css/source/module/checkout/_tooltip.less
app/design/frontend/Smartwave/porto_rtl/Magento_Checkout/web/css/source/module/checkout/_tooltip.less

Replace the following piece of code, found on line 11:

@checkout-tooltip-breakpoint__screen-m: @modal-popup-breakpoint-screen__m;

with the following code:

@checkout-tooltip-breakpoint__screen-m: @screen__m;

Diff

11c11
< @checkout-tooltip-breakpoint__screen-m: @modal-popup-breakpoint-screen__m;
---
> @checkout-tooltip-breakpoint__screen-m: @screen__m;

Please note: In current versions of the Porto Theme there is a Patch included for Magento 2.3!

• Savvas Radevic: the correct line is like in the diff: @checkout-tooltip-breakpoint__screen-m: @screen__m; We had the en_GB version,so the error code if anyone is wondering was: report.ERROR: variable @modal-popup-breakpoint-screen__m is undefined in file [...]/var/view_preprocessed/pub/static/frontend/Smartwave/porto/en_GB/Magento_Checkout/css/source/module/checkout/_tooltip.less in _tooltip.less on line 11, column 41
• kanenas: Please note: In current versions of the Porto Theme there is a Patch included for Magento 2.3! that was the most important for my Magento v.2.3.1 installation.
• Huby: After applying the patch, also delete the var/view_processed folder before retrying the deploy.

Answer 2

Update:

This is not a permanent fix, but to get your website back up & running,

/frontend/Smartwave/porto/Magento_Checkout/web/css/source/module/checkout

Rename _tooltip.less to _tooltip.less-removed

Remember to clear your cached files & redeploy:

rm -rf pub/static/ var/view_preprocessed/*; php -f bin/magento setup:static-content:deploy

Answer 3

Same issue here with magento version 2.3.1

It is Always Porto theme breaking my sites.

My advice Porto Theme there is a Patch included for Magento. The file is called Patch for Magento 2.3.x.zip This will resolve your issues. Apply this patch please and after this you should be fine again.

Step 1 download the latest Porto magento 2 theme package.

Step 2 unpack/extract all files and folders

Step 3 unpack/extract all files from the \Theme Files\Magento 2.x\Patch for Magento 2.3.1 And Above.zip if you not have done this yet **and the one that resolves your issues \Theme Files\Magento 2.x\Patch for Magento 2.3.x.zip

Upload the folder app from both patches (or the ones you did not applied) with Filezilla (or any ftp program you use) to your public_html folder or whatever magento installation folder you use.

Problem solved.

New problem from Porto Theme: Check your front end categories. Mine are not working any more after updating Porto theme but this is another issue i am working on.

Answer 4

Define @modal-popup-breakpoint-screen__m in your theme. Here is the location: Magento_Checkout/css/source/module/checkout/_tooltip.less

Here is the example how you define

• Abid Malik: tried this but did not work. I see the files css/styles-l.css and css/styles-m.css are still missing.
• Sohel Rana: I think you missing your less file where define all constant. Make sure that you have all less file otherwise you can't proceed with it.
• Abid Malik: Thank you for the help. I already did it and it worked a bit. But there were other sections of the theme which were broken.
• Abid Malik: Thank you for the help. I already did it and it worked a bit. But there were other sections of the theme which were broken. Finally, after spending some more issue, I found that after upgrade to Magento 2.1.16 somehow the theme fallback is not working. I am using custom theme -> child of Smartwave Porto theme -> child of Magento Blank. When doing static_content deploy, the CSS from porto is not loaded especially for Checkout module. I copied the files from porto to custom theme and it worked. BUT I DON'T THINK IT IS PROPER SOLUTION. AND ONE MORE THING THE WHOLE THING IS WORKING FINE ON LCLHST
• Abid Malik: I just copied files from parent theme SmartWave Porto to My Child theme and things worked. But I need more robust solution.

Answer 5

To fix the LESS compilation error in Magento 2 caused by ceil() function misuse, apply this regex replacement across your .less files:

• Find:

  ceil\(([^;]+)\);
  

• Replace with:

  ceil((1ドル));
  

This transforms invalid calls like:

ceil(1px + 1); // ❌

Into valid syntax:

ceil((1px + 1)); // ✅

---

Magento 2 uses the Wikimedia LessPHP compiler, not the Node.js LESS engine. This PHP-based compiler is strict with function syntax, especially when functions like ceil(), floor(), or round() receive math expressions as arguments.

For example:

ceil(1px + 1); 

will trigger a compilation error because the parser cannot resolve the argument unambiguously. The solution is to wrap the entire expression in an extra set of parentheses, like so:

ceil((1px + 1));

This makes the syntax compliant with LessPHP's grammar expectations and resolves the error during bin/magento setup:static-content:deploy.

Use the regex above to apply this fix project-wide, improving developer ergonomics and avoiding hard-to-debug LESS compilation failures.

• Sumit: This solution works in my case.

Answer 6

For myself, I was getting:

Compilation from source: vendor/magento/theme-frontend-blank/web/css/styles-m.less Unable to get content for 'frontend/Magento/blank/en_AU/css/source/components/_modals.less'

Quick Fix

I found removing the vendor then re-installing:

rm -rf vendor/
composer -n install

Immediately solved the issue when running php bin/magento setup:static-content:deploy, but then it would fail once again after the first deploy.

Permanent Fix

Searching for this file in vendor helped me

find . -type f -name "_modals.less" | grep -i "source/components"
./vendor/magento/magento2-base/lib/web/css/source/components/_modals.less
./lib/web/css/source/components/_modals.less

These 2 files were identical for me

Copying one of these files into my theme directory resolved these for future deploys:

mkdir -p ./app/design/frontend/<MY_VENDOR>/<MY_THEME>/web/css/source/components
cp ./vendor/magento/magento2-base/lib/web/css/source/components/_modals.less ./app/design/frontend/<MY_VENDOR>/<MY_THEME>/web/css/source/components/_modals.less