How to fix the problem of Magento 2 CSS and JS not loading

While installing a Magento as a beginner many have faced the error that resources are not loading, 500 internal server error, or CSS and Js not loading right? Sometimes, this can happen while working with or running Magento 2. Tried everything but didn't get any success? So, we are back with the solution of Magento 2 CSS and JS not loading. Therefore, let's see how to fix the problem of Magento 2 CSS and JS not loading.

However, this error defines the Magento 2 on windows 7 on WAMP. This may happen in the Magento 2 "Frontend" folder does not have a CSS file.  So here is the solution.

How to fix the problem of  Magento 2 CSS and JS not loading

There are two ways to fix the issue of Magento 2 CSS and JS not loading. Here we have listed both the methods with the steps. Firstly we have listed the common steps that you need to perform.

Step 1. Firstly, download the Magento 2 zip with sample data.

Step 2. Now, you need to create a Database in phpmyadmin.

Step 3. Then, extract the downloaded zip file in the htdocs.

Step 4. After that, run Magento 2 installation. Try with 127.0.0.1 instead of localhost for accessing store and admin URLs.

Step 5. Do Not RUN Magento if you have successfully installed the Magento.

1. By Composer

After running the above steps now run more few steps to fix this issue by the composer.

Step 1. Open the Command prompt.

Step 2. Now, to enter the Magento 2 ROOT directory, run the “cd PATH_TO_YOUR_MAGENTO2_FILES”.

Step 3. Then, enter "composer install" just to verify composer installation. If there is an error, check again the composer installation.

Step 4. After that run the following commands:

php bin/magento setup:static-content:deploy
php bin/magento cache:flush

And you are done!

2. By Editing the XML Files

Step 1. Remove all the caches and sessions from the ROOT > var > cache > *DELETE ALL*     ROOT > var > page_cache > *DELETE ALL*      ROOT > var > session > *DELETE ALL*

Step 2. To prevent Magento 2 from creating symlinks for static resources on the local server, navigate to ROOT > app > etc > di.xml and edit the di.xml file.

Now, follow the steps to edit the di.xml file.

Step 3. In the di.xml file search for the virtualType name ="developerMaterialization" section.

Step 4. Then, search for the <item name=”view_preprocessed” xsi:type=”object”>.

Step 5. Now, you need to change the Magento\Framework\App\View\Asset\MaterializationStrategy\Symlink to the Magento\Framework\App\View\Asset\MaterializationStrategy\Copy

At last, delete old files from ROOT > pub > static. DO NOT delete HTACCESS.

That's all you need to do.

Wrapping Up

I hope the above solution will help you in fixing the issue in Magento 2 CSS and JS not loading. The issue can arise while installation or with the running Magento. If you have found this article useful then kindly share it with the Magento community via social media.

Also, take a look at our Blog of  Attractive pop up window in magento using window.js.

If you come across any errors or need some clarification feel free to drop me a line. The comment section is all yours. Happy to help – Always.

Happy Coding:)