Fix LESS Issue on Static Content Deploy in Magento

LESS issue on static content deploy. How to resolve it?

The below error when running a bin/magento setup:static-content:deploy command implies that the child theme is not utilizing the Magento LESS to CSS compilation: 

Compilation from source: /srv/public_html/vendor/amasty/module-name/view/base/web/css/source/mkcss/ammodule.less
Unable to get content for 'frontend/Vendor/theme/en_US/../../../lib/css/source/lib/_lib.less'

It can be resolved by following the steps below.

Step 1. In the terminal, open the root Magento directory.

Step 2. Navigate to the directory of the affected module ( vendor/amasty/module-name or app/code/Amasty/ModuleName ) and open the registration.php file. It will contain the module name in the needed format; please copy it for further use.

Step 3. From the module directory, go to the following path: mview/frontend/web/css/source/mkcss and find a file of a similar format:  ammodule.less (e.g. ambrand.less); save its name and copy its content for further use.

Step 4. Navigate to the directory of the theme; it can be found at /app/design/vendor/theme (e.g. app/design/SmartWave/Porto ).

Step 5. There, using the previously copied module and .less file names, create an Amasty_ModuleName/web/css/source/mkcss/ammodule.less file.

Step 6. After that, copy the content of the ammodule.less file from the module folder to the newly created file, and add two "steps" (../../) to the path of _lib.less and  _responsive.less

The file contents should look as follows (the underlined elements in bold are the added ones):

// Generating css file. Path from vendor/magento/theme-frontend-blank
@import (reference) '../../../../../lib::css/source/lib/_lib.less'; // Library files
@import (reference) '../../../../../lib::css/source/lib/_responsive.less'; // Global responsive
@import '../_module.less';

After completing the steps, the deploy command should run successfully.

Info
Note that the result may depend on some instance-specific peculiarities. Please contact us if the instructions do not help.

      • Related Articles

      • How to Solve the 404 Error for vendor/slick/amslick.min.css in Magento 2?

        The 404 error for the vendor/slick/amslick.min.css file may arise after deploying new modules or themes, updating Magento, or clearing the static content. Whenever you install new extensions, switch themes, or after certain upgrades, Magento may need ...

      • CSS merge and minification breaks the frontend. How to resolve?

        When you enable CSS optimization, it is possible for the website layout (both front- and backend) to break. In order to resolve the issue, it's usually enough to redeploy the static content (php bin/magento setup:static-content:deploy). In case it ...

      • How to change CSS styling (for example, background color) in PDF templates?

        Using the PDF Customizer module, it is possible to adjust the PDF documents according to your needs. By default, the extension provides 4 pre-configured templates that could be used for each type of the order-related document: Order, Invoice, ...

      • How is CSS customization done in the Jet Theme?

        Making style changes in any theme can be done in several different ways: by creating a child theme and using the backend configurations of it to experiment with different styles (this is the safest way); by extending the parent theme's styles through ...

      • ChatGPT AI Content Generator API

        We have created a public API collection for ChatGPT AI Content Generator module with all available queries and sample data that you can both test via our demo endpoints and copy to run local tests in your Magento environment. More details about using ...