[Docs] Add message for when using reboot with different BasePath (#3678)

vnbaaij · web-flow · commit 9d3dfd51806e · 2025-04-14T23:09:20.000+02:00
* Fix #3674 by removing leading slash on @import * Add message on using different BasePath
diff --git a/README.md b/README.md
@@ -82,12 +82,12 @@ If you add interactivity later, the Blazor script will kick in and try to load t
 If you want to use **Reboot**, you'll need to add to your `app.razor`, `index.html` or `_Layout.cshtml` file a line that includes the stylesheet (`.css` file). This can be done by adding the following line to the `<head>` section:
 
 ```html    
-<link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" />
+<link href="/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" />
 ```
 
 When using the templates to create your application, **Reboot** is already set-up for you.
 
-
+_When creating a site that is hosted in a different base path,it might be necessary to remove the leading '/' from the stylesheet link._
 
 ### Register Services
 Add the following in `Program.cs`
diff --git a/examples/Demo/Shared/Pages/RebootPage.razor b/examples/Demo/Shared/Pages/RebootPage.razor
@@ -10,14 +10,17 @@
 </p>
 <p>
     If you want to use Reboot, like this demo site, you'll need to include it in your <code>App.razor</code> or <code>index.html</code> file like this:
-<CodeSnippet Language="language-html">&lt;link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" /&gt;</CodeSnippet>
+<CodeSnippet Language="language-html">&lt;link href="/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" /&gt;</CodeSnippet>
     If you are creating a site by using our <a href="/Templates">Templates</a> package, this is already set up for you. You can 
     <FluentAnchor Appearance=Appearance.Hypertext Href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" Download="reboot.css">download the file</FluentAnchor> 
     to see what's inside.
 </p>
 <p>
     PS: It is entirely possible to build a site <b>without using Reboot</b> but you will have to do more styling yourself.
 </p>
+<p>
+    PSs: <em>When creating a site that is hosted in a different base path,it might be necessary to remove the leading '/' from the stylesheet link.</em>
+</p>
 
 <h2 id="approach">Approach <a class="anchor-link" href="#approach" aria-label="Link to this section: Approach"></a></h2>
 <p>Reboot builds upon Bootstrap's Reboot which itself  builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. </p>
diff --git a/examples/Demo/Shared/wwwroot/css/site.css b/examples/Demo/Shared/wwwroot/css/site.css
@@ -1,4 +1,4 @@
-@import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';
+@import '_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';
 
 body {
     height: 100%;
diff --git a/examples/Demo/Shared/wwwroot/docs/CodeSetup.md b/examples/Demo/Shared/wwwroot/docs/CodeSetup.md
@@ -79,19 +79,17 @@ builder.Services.AddFluentUIComponents(options =>
 
 #### Reboot 
 **Reboot** is a collection of element-specific CSS changes in a single file to help kick-start building a site with the **Fluent UI Blazor** components for Blazor. It provides an elegant, consistent, and simple baseline to build upon.
-The library automatically includes reboot through the 
+The library automatically includes reboot through the templates.
 
-If you want to use **Reboot**, you'll need to add to your `app.razor`, `index.html` or `_Layout.cshtml` file a line that includes the stylesheet (`.css` file). This can be done by adding the following line to the `<head>` section:
+If you want to use **Reboot**, and your site is not created by using our templates, you'll need to add to your `app.razor`, `index.html` or `_Layout.cshtml` file a line that includes the stylesheet (`.css` file). This can be done by adding the following line to the `<head>` section:
 
 ```html    
-<link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" />
+<link href="/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" />
 ```
 
-It is entirely possible to build a site without using **Reboot**. If you do not want to use Reboot and you used the templates as a starting point, just remove the following line from the app.css file (it is the first line in the file):
+It is entirely possible to build a site without using **Reboot**. Either remove or do not add to file and it will not be used by the components.
 
-```
-@import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';
-```
+_When creating a site that is hosted in a different base path,it might be necessary to remove the leading '/' from the stylesheet link._
 
 ### Register Services
 Add the following in `Program.cs`
diff --git a/src/Templates/templates/aspire-starter/8.2/Aspire-StarterApplication.1.Web/wwwroot/app.css b/src/Templates/templates/aspire-starter/8.2/Aspire-StarterApplication.1.Web/wwwroot/app.css
@@ -1,4 +1,4 @@
-@import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';
+@import '_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';
 
 body {
     --body-font: "Segoe UI Variable", "Segoe UI", sans-serif;
diff --git a/src/Templates/templates/aspire-starter/9.0/Aspire-StarterApplication.1.Web/wwwroot/app.css b/src/Templates/templates/aspire-starter/9.0/Aspire-StarterApplication.1.Web/wwwroot/app.css
@@ -1,4 +1,4 @@
-@import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';
+@import '_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';
 
 body {
     --body-font: "Segoe UI Variable", "Segoe UI", sans-serif;
diff --git a/src/Templates/templates/blazorweb-csharp/BlazorWeb-CSharp/wwwroot/app.css b/src/Templates/templates/blazorweb-csharp/BlazorWeb-CSharp/wwwroot/app.css
@@ -1,4 +1,4 @@
-@import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';
+@import '_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';
 
 body {
     --body-font: "Segoe UI Variable", "Segoe UI", sans-serif;
diff --git a/src/Templates/templates/componentswebassembly-csharp/wwwroot/css/app.css b/src/Templates/templates/componentswebassembly-csharp/wwwroot/css/app.css
@@ -1,4 +1,4 @@
-@import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';
+@import '_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';
 
 body {
     --body-font: "Segoe UI Variable", "Segoe UI", sans-serif;
diff --git a/src/Templates/templates/maui-blazor-solution/MauiApp.1.Shared/wwwroot/app.css b/src/Templates/templates/maui-blazor-solution/MauiApp.1.Shared/wwwroot/app.css
@@ -1,4 +1,4 @@
-@import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';
+@import '_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';
 
 body {
     --body-font: "Segoe UI Variable", "Segoe UI", sans-serif;

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';`
	`1`	`+@import '_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';`
`2`	`2`
`3`	`3`	`body {`
`4`	`4`	`height: 100%;`