I got this error when running setup:static-content:deploy on Magento 2.1.8:

Compilation from source: /microcloud/domains/vampm2/domains/mydomains.co.uk/http/vendor/magento/theme-frontend-blank/web/css/styles-m.less

Compilation from source:
variable @checkout-step-content-mobile__background is undefined in file /microcloud/domains/vampm2/domains/mydomain.co.uk/http/var/view_preprocessed/css/frontend/Venustheme/cricket_child/en_GB/Magento_Checkout/css/source/module/checkout/_shipping.less in _shipping.less on line 213, column 34
211|         .form-shipping-address,
212|         .methods-shipping {
213|             .lib-css(background, @checkout-step-content-mobile__background);
214|             .lib-css(margin, @checkout-step-content-mobile__margin);
215|             .lib-css(padding, @indent__base @checkout-step-content-mobile__margin-s);
 in _responsive.less

This is a .less file form /vampm2/domains/mydomian.co.uk/http/app/design/frontend/Venustheme/cricket_child/Magento_Checkout/web/css/source/module/checkout/_shipping.less:

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    .opc-wrapper {
        .methods-shipping {
            .lib-css(background, @checkout-step-content-mobile__background);
            .lib-css(margin, @checkout-step-content-mobile__margin);
            .lib-css(padding, @indent__base @checkout-step-content-mobile__margin-s);

UPDATE The variable is not defined within this file. There are variables defined at the top of this page but checkout-step-content-mobile__background is not. From comments below, the checkout-step-content-mobile__background variable is defined in the _checkout.less file and I have found the declaration only in the http\vendor\magento\theme-frontend-luma\Magento_Checkout\web\css\source\module\checkout\_checkout.less but from what the system.log say's, it's trying to pull it from theme-frontend-blank:

[2017-12-14 12:24:08] main.CRITICAL: Compilation from source: /microcloud/domains/vampm2/domains/operationvape.co.uk/http/vendor/magento/theme-frontend-blank/web/css/styles-m.less


Here is the error from my system.log:

[2017-12-14 12:24:08] main.CRITICAL: 
Compilation from source: 
variable @checkout-step-content-mobile__background is undefined in file /microcloud/domains/vampm2/domains/operationvape.co.uk/http/var/view_preprocessed/css/frontend/Venustheme/cricket_child/en_US/Magento_Checkout/css/source/module/checkout/_shipping.less in _shipping.less on line 213, column 34
211|         .form-shipping-address,
212|         .methods-shipping {
213|             .lib-css(background, @checkout-step-content-mobile__background);
214|             .lib-css(margin, @checkout-step-content-mobile__margin);
215|             .lib-css(padding, @indent__base @checkout-step-content-mobile__margin-s);
216|         }
 in _responsive.less [] []
[2017-12-14 12:24:08] main.CRITICAL: Compilation from source: /microcloud/domains/vampm2/domains/operationvape.co.uk/http/vendor/magento/theme-frontend-blank/web/css/styles-m.less
  • You should have either a vars.less or variables.less file along with your other less files. Open it and make sure @checkout-step-content-mobile__background is defined and has a value assigned to it.
    – codestr
    Dec 15, 2017 at 15:17
  • Sorry, I didn't write the path the file correctly. See updated question now. The code snippet is from _shipping.less file. There is no vars.less or variables.less files in the same directory or anywhere within the Magento_Checkout directory :/
    – Greg
    Dec 15, 2017 at 15:26
  • Are the other variables called within that file defined within the _shipping.less file itself? If you have to, just define it above where it is called. So you would just do: @checkout-step-content-mobile__background: #ffffff; and replace the ffffff string with a color of your choice.
    – codestr
    Dec 15, 2017 at 15:44
  • Looking at that file in my local build, it looks like all the var's are declared at the top of the _shipping.less file. Add the undefined one in with them, and you should be good to go.
    – codestr
    Dec 15, 2017 at 15:45
  • That variable is definied in the _checkout.less file, I'm not sure why you are getting the error while compiling unless that file has been overwritten.
    – codestr
    Dec 15, 2017 at 15:47

2 Answers 2


Are you using Linux os please use this command to deploy the content go to your root folder of your project and give this command in your terminal:

sudo chmod -R 777 var && sudo chmod -R 777 pub && sudo chmod -R 777 generated  && sudo php -f bin/magento setup:upgrade  && sudo chmod -R 777 var && sudo chmod -R 777 pub && sudo chmod -R 777 generated && php bin/magento setup:static-content:deploy -f && sudo chmod -R 777 var && sudo chmod -R 777 pub && sudo chmod -R 777 generated
  • 777 permissions are not the best idea, see correct persmissions from Magento documentation Apr 5, 2019 at 8:00

Looking back at the answer from @Suresh R, it's not ideal to set the permissions to 777.

Magento recommends all directories to have 770 permissions and all files have 660 permissions.

To achieve the following run the command:

cd <your Magento install dir> 

find . -type f -exec chmod 644 {} \;                        // 644 permission for files

find . -type d -exec chmod 755 {} \;                        // 755 permission for directory 

find ./var -type d -exec chmod 777 {} \;                // 777 permission for var folder    

find ./pub/media -type d -exec chmod 777 {} \;

find ./pub/static -type d -exec chmod 777 {} \;

chmod 777 ./app/etc

chmod 644 ./app/etc/*.xml

chown -R :<web server group> .

chmod u+x bin/magento

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.