24

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

14 Answers 14

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

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
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
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

download a fresh .htaccess file from the official repo here

https://github.com/magento/magento2

and replace or add in it pub/static

1

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.

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 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

<IfModule mod_php5.c>

############################################
## 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

</IfModule>

<IfModule mod_security.c>
###########################################
## disable POST processing to not break multiple image upload

    SecFilterEngine Off
    SecFilterScanPOST Off
</IfModule>

<IfModule mod_deflate.c>

############################################
## 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

</IfModule>

<IfModule mod_ssl.c>

############################################
## make HTTPS env vars available for CGI mode

    SSLOptions StdEnvVars

</IfModule>

<IfModule mod_rewrite.c>

############################################
## 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]

</IfModule>


############################################
## Prevent character encoding issues from server overrides
## If you still have problems, use the second line instead

    AddDefaultCharset Off
    #AddDefaultCharset UTF-8

<IfModule mod_expires.c>

############################################
## 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

</IfModule>

###########################################
## 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

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

If (for some reason) you are using a theme from Venustheme the CSS file isn't getting created during a content deploy. There is an error in Chrome about unsupported MIME types, but when you check on FTP the file doesn't even exist.

To fix it go to:

Venustheme -> Customization -> and click Save Config

Clear cache after that and it will be fine.

-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.