[Quick Tip] After Installing, Magento2 doesn’t load CSS

Today I installed Magento2 Merchant Beta (following Let’s start with Magento2 tutorial), and I ended up with homepage that rendered HTML and images, but no styles.

Magento2 no css

How it looks when you load homepage in the browser

The Problem

After a quick investigation, I figured out that the file

MAGE_ROOT/pub/static/frontend/Magento/luma/en_US/css/styles-m.css

contained PHP exception with stack trace to help me understand the issue:

Fatal error: Maximum execution time of 30 seconds exceeded in /var/www/html/mage2/vendor/oyejorge/less.php/lib/Less/Visitor/processExtends.php on line 159

magento2-firebug

Debugging Magento2 Luma theme in Firebug

All this means is – Magento tried to compile less files on server side, but it couldn’t finish the task in 30 seconds.

The Solution

We need to increase max_execution_time in php.ini file. Since I’m using Vagrant based VM with PHP-FPM, this is how I managed to fix it:

#SSH into VM
vagrant ssh

# open up php.ini file
sudo nano /etc/php5/fpm/php.ini

# increase the value of max_execution_time parameter and save changes
max_execution_time = 300 (30 is by default)

# restart PHP-FPM
sudo service php5-fpm stop
sudo service php5-fpm start

If you have your own environment, simply find on Google where your php.ini file is and increase max_execution_time as I did above.

That’s all there is to it. Reload the homepage, and wait for a few seconds. With this settings in place, PHP will have enough time to compile LESS files and browsers will fully render Luma theme.

Milan Stojanov is a certified Magento developer and Tuts+ author on Magento Fundamentals premium course. He likes to read and write about web development.

  • Sinisa Nedeljkovic

    In my case, it happened that AllowOverride was None, so it couldn’t find a way to call pub/static.php in order to recreate assets. Also, it would be good if you increase memory_limit to 256 at least, since I couldn’t install Magento2 Sample without tuning up that option.

  • Tester Medma Tester Medma

    If you are facing problem of css and js page load design after installation in magento2

    please follow the following step-:

    open the terminal and navigate to magento web root

    $ cd /var/www/html/magento2

    Step 1.

    $ php bin/magento setup:static-content:deploy

    Step 2.

    $ php bin/magento indexer:reindex
    http://gotechnies.com/css-javascript-files-loading-magento-2-installation/

  • winvin pandora

    i have configured magento2 , but in responsive css not given ?