CSS styles not loading in either Frontend or Backend on Magento 2 site

Question

To give some background, I'm currently running a Magento 2.2.5 site.

I've recently looked at the site and none of the CSS styles are loading in either the front-end or the back-end as per the screenshots below.

I'm also getting a large number of errors in the developer console, these are below:

Error parsing header X-XSS-Protection: 1; mode=block, 1; mode=block: expected semicolon at character position 13. The default protections will be applied.
(index):1 
Refused to apply style from 'http://websitename.co.uk/pub/static/version1535542196/frontend/Infortis/ultimo_child/en_GB/css/styles-m.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
(index):1 
Refused to apply style from 'http://websitename.co.uk/pub/static/version1535542196/frontend/Infortis/ultimo_child/en_GB/mage/calendar.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
(index):1 
Refused to apply style from 'http://websitename.co.uk/pub/static/version1535542196/frontend/Infortis/ultimo_child/en_GB/css/styles-l.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
(index):19 
GET http://websitename.co.uk/pub/static/version1535542196/frontend/Infortis/ultimo_child/en_GB/requirejs/require.js 404 (Not Found)
(index):1 
Refused to execute script from 'http://websitename.co.uk/pub/static/version1535542196/frontend/Infortis/ultimo_child/en_GB/requirejs/require.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
(index):20 
GET http://websitename.co.uk/pub/static/version1535542196/frontend/Infortis/ultimo_child/en_GB/mage/requirejs/mixins.js 404 (Not Found)
(index):1 
Refused to execute script from 'http://websitename.co.uk/pub/static/version1535542196/frontend/Infortis/ultimo_child/en_GB/mage/requirejs/mixins.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
(index):1 
Refused to apply style from 'http://websitename.co.uk/pub/static/version1535542196/frontend/Infortis/ultimo_child/en_GB/SY_Slider/css/bxslider.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
(index):1 
Refused to apply style from 'http://websitename.co.uk/pub/static/version1535542196/frontend/Infortis/ultimo_child/en_GB/SY_Slider/css/custom.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
(index):21 
GET http://websitename.co.uk/pub/static/version1535542196/frontend/Infortis/ultimo_child/en_GB/requirejs-config.js 404 (Not Found)
(index):1 
Refused to execute script from 'http://websitename.co.uk/pub/static/version1535542196/frontend/Infortis/ultimo_child/en_GB/requirejs-config.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
(index):1 
Refused to apply style from 'http://websitename.co.uk/pub/static/version1535542196/frontend/Infortis/ultimo_child/en_GB/css/print.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
(index):148 
Uncaught TypeError: require.config is not a function
    at (index):148
(anonymous) @ (index):148
(index):319 
Uncaught ReferenceError: requirejs is not defined
    at (index):319
(anonymous) @ (index):319
(index):564 
Uncaught ReferenceError: requirejs is not defined
    at (index):564
(anonymous) @ (index):564
(index):623 
Uncaught ReferenceError: requirejs is not defined
    at (index):623
(anonymous) @ (index):623
(index):749 
Uncaught ReferenceError: requirejs is not defined
    at (index):749
(anonymous) @ (index):749
(index):1 
Refused to apply style from 'http://websitename.co.uk/pub/static/version1535542196/frontend/Infortis/ultimo_child/en_GB/SY_Slider/css/bxslider.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
(index):1 
Refused to apply style from 'http://websitename.co.uk/pub/static/version1535542196/frontend/Infortis/ultimo_child/en_GB/SY_Slider/css/custom.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
(index):1108 
Uncaught ReferenceError: requirejs is not defined
    at (index):1108
(anonymous) @ (index):1108
(index):1617 
Error parsing header X-XSS-Protection: 1; mode=block, 1; mode=block: expected semicolon at character position 13. The default protections will be applied.
(anonymous) @ (index):1617
(index):1608 
GET http://websitename.co.uk/pub/static/version1535542196/frontend/Infortis/ultimo_child/en_GB/images/tex/1.png 404 (Not Found)
tag_assistant_compiled.js:119 
GET http://websitename.co.uk/pub/static/version1535542196/frontend/Infortis/ultimo_child/en_GB/mage/requirejs/mixins.js 404 (Not Found)
og @ tag_assistant_compiled.js:119
(anonymous) @ tag_assistant_compiled.js:120
Oa @ tag_assistant_compiled.js:11
kg.Ma @ tag_assistant_compiled.js:120
nm @ tag_assistant_compiled.js:336
EventImpl.dispatchToListener @ VM93 extensions::event_bindings:403
publicClassPrototype.(anonymous function) @ VM99 extensions::utils:138
EventImpl.dispatch_ @ VM93 extensions::event_bindings:387
EventImpl.dispatch @ VM93 extensions::event_bindings:409
publicClassPrototype.(anonymous function) @ VM99 extensions::utils:138
messageListener @ VM102 extensions::messaging:240
EventImpl.dispatchToListener @ VM93 extensions::event_bindings:403
publicClassPrototype.(anonymous function) @ VM99 extensions::utils:138
EventImpl.dispatch_ @ VM93 extensions::event_bindings:387
EventImpl.dispatch @ VM93 extensions::event_bindings:409
publicClassPrototype.(anonymous function) @ VM99 extensions::utils:138
dispatchOnMessage @ VM102 extensions::messaging:392
tag_assistant_compiled.js:119 
GET http://websitename.co.uk/pub/static/version1535542196/frontend/Infortis/ultimo_child/en_GB/requirejs/require.js 404 (Not Found)
og @ tag_assistant_compiled.js:119
(anonymous) @ tag_assistant_compiled.js:120
Oa @ tag_assistant_compiled.js:11
kg.Ma @ tag_assistant_compiled.js:120
nm @ tag_assistant_compiled.js:336
EventImpl.dispatchToListener @ VM93 extensions::event_bindings:403
publicClassPrototype.(anonymous function) @ VM99 extensions::utils:138
EventImpl.dispatch_ @ VM93 extensions::event_bindings:387
EventImpl.dispatch @ VM93 extensions::event_bindings:409
publicClassPrototype.(anonymous function) @ VM99 extensions::utils:138
messageListener @ VM102 extensions::messaging:240
EventImpl.dispatchToListener @ VM93 extensions::event_bindings:403
publicClassPrototype.(anonymous function) @ VM99 extensions::utils:138
EventImpl.dispatch_ @ VM93 extensions::event_bindings:387
EventImpl.dispatch @ VM93 extensions::event_bindings:409
publicClassPrototype.(anonymous function) @ VM99 extensions::utils:138
dispatchOnMessage @ VM102 extensions::messaging:392
tag_assistant_compiled.js:119 
GET http://websitename.co.uk/pub/static/version1535542196/frontend/Infortis/ultimo_child/en_GB/requirejs-config.js 404 (Not Found)

As you can see the page is loading and there are no "404 page not found errors" so I do not believe this to be a serer/composer issue.

I'm new to Magento and I'm more of a web developer than a programmer, so not sure what can be causing this error.

I've seen several explanaions regarding the ngix and the .htaccess files but I'm not sure whether these are the solutions.

Any advice would be welcome regarding this point.

Possible duplicate of Magento 2 CSS and JavaScript not loading from correct folder — Dhaval Solanki, Aug 29 '18 at 12:12

score 2 · Accepted Answer · answered Aug 29 '18 at 12:06

2

This is due to your static files are not being loaded which could be issue with your .htaccess or symlinks are not supported.

Try by disabling the static files version sign and set this value to NO. ( follow section in below url )

https://devdocs.magento.com/guides/v2.2/config-guide/cache/static-content-signing.html

then flush cache and deploy static content again.

answered Aug 29 '18 at 12:06

Naveed Asim

3,637
2
11
22

Thanks. The admin side is not allowing me to use the "Save Config" button. Could you let me know if I can set this to No without using this. – CJNotts Aug 29 '18 at 12:24
you can change in database using query : insert into core_config_data (config_id, scope, scope_id, path, value) values (null, 'default', 0, 'dev/static/sign', 0); – Naveed Asim Aug 29 '18 at 12:36
That seems to have done the trick. Thanks – CJNotts Aug 29 '18 at 13:04
This is the one true answer to the solution. I tried all of the answers across the net, but this one finally solved the problem on my clean Magento 2.3 installation. I used the sql query in the second comment on the answer, because the Magento backend also didn't work. – Rick Jan 14 '19 at 15:01

CSS styles not loading in either Frontend or Backend on Magento 2 site

1 Answers1