Blazor Server and MAUI (Multi-platform App UI) are two popular frameworks for building web and mobile applications using .NET. One common requirement in both frameworks is the need to share a global CSS file between different projects. In this article, we will explore how to accomplish this by exporting a global CSS file from a Razor Class Library.
What is a Razor Class Library?
A Razor Class Library (RCL) is a project template in .NET that allows you to create reusable UI components, pages, and views. It is a convenient way to share UI functionality across multiple projects. In our case, we will use an RCL to share a global CSS file between a Blazor Server project and a MAUI hybrid project.
Creating a Razor Class Library
To begin, let's create a new Razor Class Library project in Visual Studio. Follow these steps:
- Open Visual Studio and click on "Create a new project".
- Select "Razor Class Library" under the "ASP.NET Core" category.
- Choose a name and location for your project and click "Create".
Once the project is created, you will see a folder structure containing the default files for an RCL.
Adding a Global CSS File
Next, let's add a global CSS file to the RCL. This file will contain the styles that we want to share between our Blazor Server and MAUI projects.
- Right-click on the project in Visual Studio and select "Add" > "New Item".
- Choose "Web" from the left-hand menu and select "CSS File" from the templates.
- Name the file "global.css" and click "Add".
You can now add your custom styles to the "global.css" file. These styles will be available to both the Blazor Server and MAUI projects.
Referencing the Global CSS File
Now that we have our global CSS file, we need to reference it in both the Blazor Server and MAUI projects. Follow these steps:
Blazor Server
- Open your Blazor Server project in Visual Studio.
- Locate the "_Imports.razor" file in the "Pages" folder.
- Add the following line at the top of the file to import the CSS file:
<link rel="stylesheet" href="/_content/YourRclProjectName/global.css" />Replace "YourRclProjectName" with the actual name of your RCL project.
MAUI Hybrid Project
- Open your MAUI hybrid project in Visual Studio.
- Locate the "MainPage.xaml" file in the "MainPage" folder.
- Add the following line inside the <ContentPage.Resources> tag to import the CSS file:
<ResourceDictionary> <StyleSheet Source="/_content/YourRclProjectName/global.css" /> </ResourceDictionary>Replace "YourRclProjectName" with the actual name of your RCL project.
That's it! The global CSS file is now shared between your Blazor Server and MAUI projects. Any styles defined in the "global.css" file will be applied to the UI elements in both projects.
Sharing a global CSS file between a Blazor Server and MAUI hybrid project is made easy with the help of a Razor Class Library. By following the steps outlined in this article, you can ensure consistent styling across your web and mobile applications.
References
| Source | Link |
|---|---|
| Microsoft Documentation - Razor Class Libraries | https://docs.microsoft.com/en-us/aspnet/core/razor-pages/ui-class?view=aspnetcore-6.0&tabs=visual-studio |
| Microsoft Documentation - Blazor Server | https://docs.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-6.0#blazor-server |
| Microsoft Documentation - MAUI | https://docs.microsoft.com/en-us/dotnet/maui/ |