23

Suddenly CSS is not loading on my Magento 2 admin panel. The frontend is working fine.

Error details:

  1. "Refused to apply style from 'https://www.ornativa.com/pub/static/version1502029409/adminhtml/Magento/backend/en_US/css/styles-old...' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled."

  2. "Uncaught SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse () at callback ((index):68) at Object.execCb (require.js:1650) at Module.check (require.js:866) at Module. (require.js:1113) at require.js:132 at require.js:1156 at each (require.js:57) at Module.emit (require.js:1155) at Module.check (require.js:917)"enter image description here

  • anything done with the server or .htaccess file? – Shyam Krishna Sreekumar Feb 7 '18 at 8:19
  • 1
    Same problem i'm facing – ren Feb 13 '18 at 5:34
  • 1
    Did you solve your issue? – zus Apr 24 '18 at 7:11

13 Answers 13

12

Recently had a very similar issue with a Magento 2 site. Managed to track down the issue to a very important .htaccess file missing in the pub/static folder on the server.

It's unclear how this file was mysteriously removed but re-adding this file from a clean Magento 2 installation rectified the issue.

9

The problem is caused due to the permission issue on the static files.

To fix this issue,

1) Go to file path pub/static/

2) Check whether .htaccess file is available (hidden file - Press cntrl+H to view it).

3) If not available, based on the Magento version get .htaccess file in the file path pub/static/ and move into your server.

4) Finally, clear your browser and Magento cache and check it.

  • I dont check htaccess file :D perfect! :) – alexey boltynov Jan 24 at 11:31
8

I had the same issue this morning. I updated Sales email templates, then suddenly admin pages stopped working.

The problem was solved when I re-deployed the assets for admin pages.

I run these commands:

  1. grunt clean; grunt exec; grunt less
  2. bin/magento setup:static-content:deploy -f -s standard
  3. bin/magento cache:clean

Maybe, the CSS has to be re-deployed whenever the Sales email templates are updated.

  • Could you please explain what the grunt commands do? I don't currently use it. Thanks! – Joshua Flood Jul 30 '18 at 12:48
  • 1
    @JoshuaFlood maybe this link can help you and the others .. devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/… – fudu Aug 10 '18 at 7:09
  • 1
    @JoshuaFlood grunt is just a way to automate recurring tasks like in this case compiling less file into css, but you could go over a whole project without using grunt, in my case used compass for compiling sass – medmek Aug 27 '18 at 11:04
  • Thanks guys! Though I'm not sure that I want to tamper too much with the magento system right now as I'm almost done setting up my production environment and I've read that Magento will no longer support LESS in the near future, so I'll wait until they've got their act together. Will have to play around at some point. – Joshua Flood Aug 30 '18 at 4:32
3

enable the rewrite_module of apache

  • You mean : apache httpd.conf the line : LoadModule rewrite_module modules/mod_rewrite.so – Gem May 11 '18 at 7:16
3

If you are in production mode, enter this command

bin/magento setup:static-content:deploy

If you are in developer mode, enter these commands in order

1- grunt exec 2- grunt less

1

To get rid of this error, I removed the CSS snippet from

Admin Panel > Design > Configuration > Select Theme > HTML Head section > Scripts and Style Sheets

Then you can proceed. Since that file is never gonna be used in magento :)

1

I also had the same issue,

What I did was to to rename the .htaccess on both the root directory and /pub directory. it fixed my problem.

Also you can replace .htaccess with this

############################################

uncomment the line below to enable developer mode

SetEnv MAGE_MODE developer

#

uncomment these lines for CGI mode

make sure to specify the correct cgi php binary file name

it might be /cgi-bin/php-cgi

Action php5-cgi /cgi-bin/php5-cgi

AddHandler php5-cgi .php

#

GoDaddy specific options

Options -MultiViews

you might also need to add this line to php.ini

cgi.fix_pathinfo = 1

if it still doesn't work, rename php.ini to php5.ini

#

this line is specific for 1and1 hosting

#AddType x-mapp-php5 .php
#AddHandler x-mapp-php5 .php
#

default index file

DirectoryIndex index.php

#

adjust memory limit

php_value memory_limit 768M
php_value max_execution_time 18000
#

disable automatic session start

before autoload was initialized

php_flag session.auto_start off
#

enable resulting html compression

#php_flag zlib.output_compression on
#

disable user agent verification to not break multiple image upload

php_flag suhosin.session.cryptua off

#

disable POST processing to not break multiple image upload

SecFilterEngine Off
SecFilterScanPOST Off

#

enable apache served files compression

http://developer.yahoo.com/performance/rules.html#gzip

# Insert filter on all content
###SetOutputFilter DEFLATE
# Insert filter on selected content types only
#AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript

# Netscape 4.x has some problems...
#BrowserMatch ^Mozilla/4 gzip-only-text/html

# Netscape 4.06-4.08 have some more problems
#BrowserMatch ^Mozilla/4\.0[678] no-gzip

# MSIE masquerades as Netscape, but it is fine
#BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

# Don't compress images
#SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary

# Make sure proxies don't deliver the wrong content
#Header append Vary User-Agent env=!dont-vary

#

make HTTPS env vars available for CGI mode

SSLOptions StdEnvVars

#

enable rewrites

Options +FollowSymLinks
RewriteEngine on
#

you can put here your magento root folder

path relative to web root

#RewriteBase /magento/
#

workaround for HTTP authorization

in CGI environment

RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
#

TRACE and TRACK HTTP methods disabled to prevent XSS attacks

RewriteCond %{REQUEST_METHOD} ^TRAC[EK]
RewriteRule .* - [L,R=405]
#

redirect for mobile user agents

#RewriteCond %{REQUEST_URI} !^/mobiledirectoryhere/.*$
#RewriteCond %{HTTP_USER_AGENT} "android|blackberry|ipad|iphone|ipod|iemobile|opera mobile|palmos|webos|googlebot-mobile" [NC]
#RewriteRule ^(.*)$ /mobiledirectoryhere/ [L,R=302]
#

never rewrite for existing files, directories and links

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
#

rewrite everything else to index.php

RewriteRule .* index.php [L]

#

Prevent character encoding issues from server overrides

If you still have problems, use the second line instead

AddDefaultCharset Off
#AddDefaultCharset UTF-8

#

Add default Expires header

http://developer.yahoo.com/performance/rules.html#expires

ExpiresDefault "access plus 1 year"
ExpiresByType text/html A0
ExpiresByType text/plain A0

#

Deny access to root files to hide sensitive application information

RedirectMatch 404 /\.git

<Files composer.json>
    order allow,deny
    deny from all
</Files>
<Files composer.lock>
    order allow,deny
    deny from all
</Files>
<Files .gitignore>
    order allow,deny
    deny from all
</Files>
<Files .htaccess>
    order allow,deny
    deny from all
</Files>
<Files .htaccess.sample>
    order allow,deny
    deny from all
</Files>
<Files .php_cs>
    order allow,deny
    deny from all
</Files>
<Files .travis.yml>
    order allow,deny
    deny from all
</Files>
<Files CHANGELOG.md>
    order allow,deny
    deny from all
</Files>
<Files CONTRIBUTING.md>
    order allow,deny
    deny from all
</Files>
<Files CONTRIBUTOR_LICENSE_AGREEMENT.html>
    order allow,deny
    deny from all
</Files>
<Files COPYING.txt>
    order allow,deny
    deny from all
</Files>
<Files Gruntfile.js>
    order allow,deny
    deny from all
</Files>
<Files LICENSE.txt>
    order allow,deny
    deny from all
</Files>
<Files LICENSE_AFL.txt>
    order allow,deny
    deny from all
</Files>
<Files nginx.conf.sample>
    order allow,deny
    deny from all
</Files>
<Files package.json>
    order allow,deny
    deny from all
</Files>
<Files php.ini.sample>
    order allow,deny
    deny from all
</Files>
<Files README.md>
    order allow,deny
    deny from all
</Files>
#

If running in cluster environment, uncomment this

http://developer.yahoo.com/performance/rules.html#etags

#FileETag none
0

You need to add your theme in that file: dev/tools/grunt/configs/themes.js

0

I had this issue recently and couldn't find what was causing it at all.

That was until I checked the debug.log - it turned out to be a syntax error in my theme's custom LESS file. (In my case I'd added an extra bracket somewhere).

  • I fixed the error
  • Deployed static files again
  • Cleaned and flushed the cache

I refreshed the page again and the theme was processing properly.

I'm not sure why Magento threw a wobbler over that - it could be the setup of my site, but hey - it solved it so I know for next time!

Hope this helps others :)

0

download a fresh .htaccess file from the official repo here

https://github.com/magento/magento2

and replace or add in it pub/static

0

In my case this problem appeared after I deleted a less variable which was still used in other less files.

Therefore Magento did not complete the compilation of the css which results in another server response as expected.

0

Spend about an hour looking for solution to this problem...

I had fresh Magento ver. 2.2.6 installation and had the same problem. None of the answer currently here worked for me. Finally a simple:

php bin/magento cache:flush

fixed my problem.

I hope the above will come to rescue if all the other tips fail.

-2

My problem was owner permissions, some of the files were shifted from my account on the root account.

After seeing there were to many files to be changed i just changed for the whole www folder as I have only one magento

chown yourusername:yourusername -R /home/<yourusername>/www/*
  • This answer is very dependent of what user/file permissions your server runs under. This answers will most often than not, ruin installs where the server runs under www-data. – Pathfinder Jan 22 at 3:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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