33

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 (<anonymous>)
at callback ((index):68)
at Object.execCb (require.js:1650)
at Module.check (require.js:866)
at Module.<anonymous> (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
  • 2
    Did you solve your issue? – zus Apr 24 '18 at 7:11
  • I had this issue just now, but it was due to indicating the the wrong module in the layout/default.xml where I was referencing this, fixed that and this was fixed – Barry Dec 2 '19 at 14:38

19 Answers 19

19

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.

| improve this answer | |
14

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.

| improve this answer | |
  • I dont check htaccess file :D perfect! :) – alexey boltynov Jan 24 '19 at 11:31
11

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

| improve this answer | |
  • 1
    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
  • @JoshuaFlood, where did you read that magento will stop using LESS? Is this still current? – Black Feb 28 at 9:13
5

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.

| improve this answer | |
4

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

| improve this answer | |
3

enable the rewrite_module of apache

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

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
| improve this answer | |
  • Thank you for this answer it's work. – Chirag Gondaliya Nov 12 '19 at 12:06
1

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

| improve this answer | |
1

download a fresh .htaccess file from the official repo here

https://github.com/magento/magento2

and replace or add in it pub/static

| improve this answer | |
0

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

| improve this answer | |
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.

| improve this answer | |
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.

| improve this answer | |
0

same problem I've had just today. Whatever I've done I could not resolve. I could not reach admin since CSS was not loading...

The I figured out from Google page information, itr can not find the css files under /pub/static. I checked the .htaccess files for all directories, all was fine.

I saw it was searching for .css files but I checked then with cpanel file explorer, that place I have .min.css.

SO I understand this is because of the minification setting in admin for CSS and JS.

Before I checked all to YES for JSS and CSS merge and minification.

Since I could not reach admin, I opened phpMyadmin and find core_config_data table and make search PATH = %LIKE% css and then js and make minification and merge set to "0" back.

then I make again:

  • bin/magento s:d:c

  • bin/magento setup:static-content deploy -f (tr_TR for my language)

  • bin/magento c:f

  • bin/magento c:c

all is fine and this problem resolved for me...

hope this helps someone facing same case like me...

| improve this answer | |
0

I was facing the same error in my local setup. So I tried

  1. grunt clean;
  2. bin/magento setup:static-content:deploy -f

At the time of static content deploy I come to know that there is some wrong variable assignment in _theme.less. I fixed that and again ran

  1. grunt clean;
  2. bin/magento setup:static-content:deploy -f

This fixed my issue.

| improve this answer | |
0

I had the same problem, I noticed that the normal CSS was being called on the page and, previously, I enabled the reduction of the size of the CSS, to solve, duplicated the CSS files and removed the ".min" from them:

example.min.css example.css

leaving the two files in the same folder.

| improve this answer | |
0

I'll just add that I had this error when my style sheet file was empty, and it went away once I added css to it.

| improve this answer | |
0

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

Admin Panel -> Content > 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 :)

| improve this answer | |
  • What CSS Snipet was causing this?? The field is already empty on a fresh magento 2. – Black Feb 28 at 9:18
0

El tratado todas las soluciones aportadas por varios sitios sin solución. Finalmente el problema estaba en los archivos de sesión. Por un error en mi servidor plesk modifique el directorio de almacenamiento de sesión en env.php al directorio var / sessions en mi raid de magento. Modifique los permisos en mi servidor para el almacenamiento de sesion y restarure env.php para configurar nuevamente las sesiones en el directorio de mi servidor e inmediatamente se corrigio el problema. Espero le sirva a alguien o de luz a algun problema similar.

| improve this answer | |
-3

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/*
| improve this answer | |
  • 1
    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 '19 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.