CSS Isolation for Blazor Web App not working #9801

6 Answer(s)

• 

  0

  AI-Bot created 22 days ago

  Support Team ABP Agent

  • In ABP 9.x Blazor WebAssembly/WebApp projects, CSS isolation for component styles (e.g., Index.razor.css) does not work out-of-the-box in the WASM client due to the new global assets and bundling system. The isolated CSS files are not automatically included in the global bundles that are loaded by the WASM client.

  • To ensure your isolated CSS is included and applied in the WASM context, you need to explicitly add the generated CSS files to the global style bundle using a BundleContributor. Here’s how you can do it:

  1. Create a custom BundleContributor for your styles:

  public class MyProjectNameStyleBundleContributor : BundleContributor
     {
         public override void ConfigureBundle(BundleConfigurationContext context)
         {
             // Add the generated CSS file for your component
             context.Files.Add("_content/MyProjectName.Blazor.Client/Index.razor.css");
         }
     }
  

  2. Register your contributor in your module’s ConfigureServices:

  Configure<AbpBundlingOptions>(options =>
     {
         var globalStyles = options.StyleBundles.Get(BlazorWebAssemblyStandardBundles.Styles.Global);
         globalStyles.AddContributors(typeof(MyProjectNameStyleBundleContributor));
     });
  

  3. Ensure your .csproj for the client project includes the following so the CSS is published:

  <ItemGroup>
       <Content Update="Index.razor.css">
         <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
       </Content>
     </ItemGroup>
  

  4. Remove any manual global.css from wwwroot and rely on the bundling system.

  5. Run your application and verify that the CSS is present in /global.css (or the configured bundle) and applied in both server and WASM modes.

  This approach ensures your isolated CSS is bundled and available to the WASM client, resolving the issue where styles only appear in server-side rendering.

  Sources:

  • ABP Global Assets for Blazor WASM
  • Bundle Contributors in ABP

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Save Cancel
• 

  0

  shodgson created 22 days ago

  that does not seem to fix the issue. I have included the the css file manually in the bundle and I still have the issue.

  Save Cancel
• 

  0

  maliming created 22 days ago

  Support Team Fullstack Developer

  hi

  I will try your steps.

  Create a basic microservice solution with a Blazor Web App (Server + WASM).

  Can you share your solution info?

  Thanks.

  Save Cancel
• 

  0

  maliming created 22 days ago

  Support Team Fullstack Developer

  hi

  I can't reproduce it.

  Can you share your App.razor code?

  And what are the outputs of https://localhost:44326/YourProjectName.Blazor.Client.styles.css and https://localhost:44326/YourProjectName.Blazor.styles.css

  

  Thanks.

  Save Cancel
• 

  0

  shodgson created 21 days ago

  I created a new solution on 9.2.0 and the issue is not there anymore. I will need to investigate a bit more to see what could potentially be the difference between 9.1.0 and 9.2.0 that make it works.

  Save Cancel
• 

  0

  maliming created 21 days ago

  Support Team Fullstack Developer

  ok

  Save Cancel