I’m currently developing a mobile app with Kivy where I load HTML templates into a WebView. While the HTML templates load correctly, I’ve encountered an issue with loading CSS files. Here’s how I’ve set it up:

Project Structure:
project_strucuture

In index.html, I’m referencing CSS files like this:

<link rel="stylesheet" href="../static/assets/css/main.css">
<link rel="stylesheet" href="../static/assets/css/other_styles.css">

import webview
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.button import Button

class WebViewApp(App):
    def build(self):
        window = webview.create_window('My App', 'templates/index.html', width=800, height=600)
        return BoxLayout()

if __name__ == '__main__':
    WebViewApp().run()

Despite setting up the directory structure and referencing CSS files correctly in index.html, the app consistently logs 404 errors for each CSS file attempted to load. Here’s a snapshot of the error in the console:

Thank you!

Certainly! Here’s a response to the prompt:

I attempted to build a mobile app using Kivy where I load HTML templates into a WebView component. The HTML templates load successfully, but I encountered issues with loading CSS files. Here’s a breakdown:

What I tried:

Created a directory structure with static/assets/css for CSS files and templates for HTML files.
Referenced CSS files in index.html using <link> tags with relative paths like <link rel="stylesheet" href="../static/assets/css/main.css">.
Configured the Kivy app to create a WebView window pointing to index.html.

Expected outcome:
I expected the app to load main.css and other CSS files specified in index.html without errors, as they are located in the static/assets/css directory relative to the HTML files.

Actual result:
When running the app, I consistently received 404 errors for each CSS file attempt. The console output indicated that the app could not find the CSS files at the specified paths.

error in the console