Magento 2 | deploy static content error

Question

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:
frontend/Venustheme/cricket_child/en_GB/css/styles-m.less
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 {
 .form-login,
 .form-shipping-address,
 .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

---

UPDATE

Here is the error from my system.log:

[2017年12月14日 12:24:08] main.CRITICAL: 
Compilation from source: 
frontend/Venustheme/cricket_child/en_US/css/styles-m.less
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

• codestr: 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.
• Greg: 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 :/
• codestr: 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: 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: 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.

Answer 1

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

• Tero Lahtinen: 777 permissions are not the best idea, see correct persmissions from Magento documentation

Answer 2

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