Skip to content

fix-css-routing-issue.md

Latest commit

 

History

History
51 lines (41 loc) · 2.08 KB

fix-css-routing-issue.md

File metadata and controls

51 lines (41 loc) · 2.08 KB

Fix for CSS Routing Issue in PromptSpark Explorer

Problem

The browser console was showing errors when loading PromptSpark Explorer pages:

Refused to apply style from 'https://localhost:55863/promptspark' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Root Cause

The issue was caused by CSS paths using the tilde (~) syntax (~/dist/css/PromptSpark.min.css) in PromptSpark views. When the browser was on nested routes like /promptspark/explorer/details/sometype, the relative path resolution was causing the browser to request CSS from incorrect paths.

Solution

Changed all CSS references in PromptSpark views from relative paths using tilde (~) syntax to absolute paths starting from the root (/):

Files Updated:

  1. WebSpark.Portal\Areas\PromptSpark\Views\Explorer\Details.cshtml
  2. WebSpark.Portal\Areas\PromptSpark\Views\Explorer\Index.cshtml
  3. WebSpark.Portal\Areas\PromptSpark\Views\Home\TestOnPageNavigation.cshtml
  4. WebSpark.Portal\Areas\PromptSpark\Views\ChatCompletion\Enhanced.cshtml

Changes Made:

Before:

<link href="~/dist/css/PromptSpark.min.css" rel="stylesheet" />

After:

<link href="/dist/css/PromptSpark.min.css" rel="stylesheet" />

Verification

  1. ? Build completed successfully
  2. ? CSS files exist in wwwroot/dist/css/
    • PromptSpark.min.css
    • webspark.min.css
  3. ? NPM build completed successfully (with only harmless Bootstrap deprecation warnings)

Additional Notes

  • The main layout (_Layout.cshtml) already uses absolute paths and was not affected
  • This fix ensures consistent behavior across all routing depths
  • The issue only affected PromptSpark area views that used relative paths
  • CSS compilation and build processes continue to work normally

Testing Recommendation

After deployment, verify that:

  1. PromptSpark Explorer index loads without CSS errors
  2. PromptSpark Explorer details pages load without CSS errors
  3. All PromptSpark area styling appears correctly
  4. Browser developer tools show no 404 errors for CSS files