Blazor WASM独立项目引入自定义CSS触发未处理错误

问题描述 #

我有一个基于.NET 9的全新Blazor WASM独立项目，原本运行正常。添加自定义CSS文件并在index.html中引用后，页面出现「An unhandled error has occurred. Reload」提示，控制台无相关错误信息。

排查时我移除所有新增内容后逐个添加，引入谷歌字体或新版Bootstrap均无问题，但引用自定义CSS后错误出现。我的CSS文件是新创建的，仅包含基础CSS类且已压缩，请问可能是什么原因导致该问题？

附index.html代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My New App</title>
    <base href="/" />
    <!--<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Manrope&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap">
    <link rel="stylesheet" href="css/style.css" /> /* Changed the reference from app.css to style.css */
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
    <link href="Ingrid.Web.styles.css" rel="stylesheet" />
</head>

<body>
    <div id="app">

    </div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="." class="reload">Reload</a>
        <span class="dismiss">🗙</span>
    </div>
    <script src="_content/Microsoft.Authentication.WebAssembly.Msal/AuthenticationService.js"></script>
    <script src="_framework/blazor.webassembly.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> /* I also added this to use the latest version of Bootstrap */
</body>

</html>

可能的原因及解决办法 #

• HTML注释语法错误：你的index.html中使用了/* ... */这种CSS注释语法，HTML的标准注释格式是<!-- ... -->。错误的注释会导致浏览器解析HTML文档出错，进而干扰Blazor的初始化流程，这大概率是触发错误的核心原因。把这两处注释改成标准HTML格式即可。
• CSS文件路径错误：确认css/style.css是否存在于wwwroot/css目录下。Blazor WASM的静态资源默认从wwwroot读取，路径写错会导致CSS加载失败，可能触发Blazor的全局错误提示但控制台不显示404。
• 压缩CSS存在语法问题：压缩后的CSS可能出现语法错误（比如未闭合的括号、非法属性值）。尝试用未压缩的原始CSS文件测试，如果恢复正常，说明压缩工具生成的代码有问题，换用其他压缩工具或手动检查压缩后的代码。
• CSS选择器或特性冲突：某些CSS特性（如错误的CSS变量、无效的伪类）可能在Blazor渲染环境中引发异常。可以逐行删除CSS内容并测试，定位到具体引发错误的代码段。
• 样式隔离冲突：如果项目启用了组件样式隔离（.razor.css文件），自定义CSS的选择器可能和隔离样式冲突。暂时移除组件的样式隔离文件，测试是否能解决问题。

内容的提问来源于stack exchange，提问作者Sam