BootstrapBlazor组件库，项目模板css样式隔离问题

BootstrapBlazor组件库，项目模板css样式隔离问题

问题描述

有很多小伙伴在使用BootstrapBlazor组件库的项目模板的时候，遇到了隔离样式不生效的问题。

解决方案

只需要添加一行代码即可解决问题。

    <link href="xxx.styles.css" rel="stylesheet" />

  1. 在项目解决方案中，找到这两个文件。

    img

  2. 在Server项目中Pages/_Layout.cshtml文件中的head添加代码。

    img

    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="~/" />
    <link rel="stylesheet" href="libs/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css">
    <link rel="stylesheet" href="_content/BootstrapBlazor/css/motronic.min.css">
    <link rel="stylesheet" href="_content/BootstrapBlazorApp1.Shared/css/site.css">
    <link rel="stylesheet" href="_content/BootstrapBlazorApp1.Shared/css/motronic.css">

    <!-- 添加下面这行代码 -->
    <link href="BootstrapBlazorApp1.styles.css" rel="stylesheet" />
    <!-- 添加上面这行代码 -->

    <title>Bootstrap Blazor Server App</title>
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>

  3. 在WebAssembly项目中wwwroot/index.html文件中的head添加代码。
    img

    <head>
    <meta charset="utf-8">
    <title>Bootstrap Blazor Wasm App</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta content="bootstrap,blazor,wasm,webassembly,UI,netcore,web,assembly" name="Keywords">
    <base href="/">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon" href="icon-512.png">
    <link rel="manifest" href="manifest.json">
    <link rel="stylesheet" href="libs/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css">
    <link rel="stylesheet" href="_content/BootstrapBlazorApp1.Shared/css/site.css">
    <link rel="stylesheet" href="_content/BootstrapBlazorApp1.Shared/css/motronic.css">

    <!-- 添加下面这行代码 -->
    <link href="BootstrapBlazorApp1.styles.css" rel="stylesheet" />
    <!-- 添加上面这行代码 -->

    <link rel="stylesheet" href="style/loading.css">
</head>

注意事项

引用中的xxx.styles.css，xxx表示你当前的项目名称。

posted @ 2023-09-22 09:33  代码搬运工lee  阅读(362)  评论(1)  编辑  收藏  举报