Cannot Load A Stylesheet In Web Dev Module

Ignition
1

I really need help with this issue. Every time I try to load a stylesheet/css file from an html page in the Web Dev module in Ignition, I get the following message in the browser console:

Resource interpreted as Stylesheet but transferred with MIME type text/html

This causes the stylesheet not to load.

I have spent a few hours researching and believe this is either a server setting or a setting somewhere in Ignition that is causing this problem. But since we aren’t running Apache or IIS on this server, I feel like Ignition might be to blame.

2

The webdev resources can be given an explicit mime type of text/css in the dropdown in the resource editor in the designer (open the resource and look at the bottom of the editor tab). If you are trying to serve the resource as css, make sure that’s not set to text/html.

1 Like
3

Good gawd. I can’t even tell you how much time I wasted on this to not even notice that drop down. You’re a life saver. Why Ignition can’t auto select that when I save the file type as CSS is beyond me. >:(

Thanks very much!

4

I can't even tell you how much time I wasted on this to not even notice that drop down.

Sorry to hear that, unfortunately it happens to the best of us!

Why Ignition can't auto select that when I save the file type as CSS is beyond me.

There may be room to improve/add limited mime-type inference, but given how easy it is to configure manually, it would be low on the priority list.

Glad we were able to get it working for you.

5

I had this same issue just now, I didn't even notice the dropdown :confused:

However after setting this, I'm still not seeing my stylesheet being used.
image

If I put the full link to the CSS file, it works, but a relative reference as above doesn't?

6

/stylesheet, maybe?
Check your network tab in the browser dev tools too.

7

Ah, well that's interesting (that's useful to know about the network tab!):
image

It's looking for it in the parent folder of the project. Should it do that? the index.html is in the project folder

Adding the project name to it works:

  <link rel="stylesheet" href="./<PROJ_NAME>/stylesheet.css>

Edit:
oh, I get it... I'm accessing the index through the .. root? address instead of explicitly addressing the index.html page (I don't know the terminology)
Essentially instead of HTTP://server:8088/system/webdev/PROJ/index.html I'm accessing it via
HTTP://server:8088/system/webdev/PROJ/
hence why it redirects back to the webdev folder :confused: how can I make it work for both links?

Edit 2:
(can you tell I'm new to HTML???)
It does work if you add a / to the end of the URL
e.g.
HTTP://server:8088/system/webdev/PROJ/
but it doesn't work without the ending /
HTTP://server:8088/system/webdev/PROJ