Issue with Loading CSS and JS Files in WebView from MAUI Resources Folder

I am building a .NET MAUI app and am trying to render an HTML file in a WebView. The HTML file needs to load external CSS and JavaScript files that are located in the Resources/FirecodeRequirements folder of my MAUI project.

I’ve followed the steps to include the assets, but they are not loading correctly in the WebView. Here are the details of my setup:

Folder Structure:

/Resources
    └── /FirecodeRequirements
        ├── index.html
        ├── styles.css
        └── script.js

Build Action:

  • I’ve set the Build Action for all the files (index.html, styles.css, script.js) to MauiAsset.

HTML File (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fire Code Requirements</title>
    <!-- Correct Path to CSS -->
    <link rel="stylesheet" href="FirecodeRequirements/styles.css">
</head>
<body>
    <div class="table_component page active">
        <table>
            <tr><th>Page 1</th></tr>
            <tr><td>Content for page 1</td></tr>
        </table>
        <div class="navigation-btns">
            <button class="prevBtn" disabled>Previous</button>
            <button class="nextBtn">Next</button>
        </div>
    </div>

    <!-- Correct Path to JS -->
    <script src="FirecodeRequirements/script.js"></script>
</body>
</html>

MAUI Code to Load the HTML:

var webView = new WebView
{
    Source = "Resources/FirecodeRequirements/index.html"
};

Problem:

  • The HTML is loading correctly, but CSS and JavaScript are not applied (styles and scripts are not working).
    -I’ve tried different variations of the file paths but the CSS and JS files still aren’t loading.

What I’ve Tried:

  • Ensured the Build Action for the CSS, JS, and HTML files is set to MauiAsset.
  • Made sure the paths in the HTML file are correct and reflect the folder structure (FirecodeRequirements/).
  • Cleaned and rebuilt the project.
  • Verified the app is running correctly on the device, but the styles and scripts are not applied.

Question:
How can I correctly load CSS and JavaScript files from the Resources folder into a WebView in .NET MAUI? Is there a specific way to reference the asset files that I might be missing?

Any guidance on what could be going wrong would be much appreciated!