CSS is not loading

[maximedrn]

Hello,

I am asking for help because I have not seen this problem anywhere. Let me explain.

When running the page with EEL, everything is loaded and found on the server: HTML, CSS and JS files. The HTML content is displayed and the JS code works: the functions communicate with the Python code without any problem. However, even if the CSS is loaded (positive response from the Network tab of DevTools + I can see the file content in the Sources tab), the CSS is not applied.

I have tried many things to fix this:

• I changed eel.init('web') to eel.init(abspath('web')).
• I changed ./css/styles.css to /css/styles.css and http://localhost:8000/css/styles.css.
• I deleted the browser cache.
• I have tried with Edge and Firefox and the problem persists.
• I followed this answer.

No errors are displayed in the console and no extension has any direct impact on the page because the page loads perfectly without going through a local server. Also, the <style> tag does not work either, only the style attribute in a tag works. I can only add style individually.

So, I think the error is either from Chrome (I didn't see any error about this) or from EEL.

Operating system: Windows 11. Python versions: 3.9.13. Google Chrome version: 112.

Python code used:

# EEL module: pip install eel.
import eel

size: tuple = ..., ...
positon: tuple = ..., ...

eel.init(abspath('web'))  # Init the HTML/CSS interface.
eel.start(  # Start EEL on http://localhost:8000/index.html.
    'index.html', host='localhost', mode='chrome', shutdown_delay=10,
    port=8000, size=size, position=position, cmdline_args=[
    '--disable-gpu'])

I also added these arguments but nothing has changed:

• cmdline_args=['--disable-http-cache'] # eel.start()
• allowed_extensions=['.js', '.html', '.css'] # tried on eel.init() and eel.start()

[maximedrn]

I created a Pull Request #685 in connection with this error. I found the problem by inspecting the code. I think it would be obvious to add the .css extension to the allowed_extensions parameter of the eel.init() function by default.

[thatfloflo]

Could you post a full minimal working example @maximedrn, including the files in the 'web' directory (e.g. app.py with your start code, web/index.html with your HTML and web/style.css with you CSS)?

I typically initialise eel as follows:

   eel.init(
        str(Path(__file__).parent / "web"),
        allowed_extensions=[".html", ".js", ".css", ".woff", ".svg", ".svgz", ".png"]
    )

This has worked for me with Python 3.9, 3.10, 3.11 on Windows 10, Windows 11, Ubuntu 22.04 and current OS X.

Have you tried adding the type attribute in HTML to see if that makes a difference? E.g.

<style type="text/css">
  body { background: #ccc }
</style>
<!-- or -->
<link rel="stylesheet" type="text/css" href="/style.css" />

It would also be useful if you could check the Response Headers you get for your CSS file (in DevTools under Network reload to record the hits, then click on the CSS file in the list, which should open some tabs with data, among them "Headers" where you can see the Response Headers).