Open Closed

Manage and Customize Bootstrap Styles #2132


User avatar
0
z2lai created
  • ABP Framework version: v4.4.2
  • UI type: Blazor Server with LeptonTheme

Hi,

I'm trying to customize the styling of my app and also add in Telerik UI components, but I'm seeing some class name conflicts from the blazorise.bootstrap.css stylesheet and the bootstrap styles.

  • How can I customize/modify the Bootstrap source .scss files found in the map file: wwwroot\libs\bootstrap\css\bootstrap.css.map? I don't see these source .scss files anywhere.
  • How can I remove the blazorise.bootstrap.css styles?
  • What is the recommended way for managing the global theme and customizing styles for ABP framework with Blazor Server UI? Should I be using Blazor CSS isolation for individual components with global theming from overriding styles/stylesheet from LeptonTheme?

1 Answer(s)
  • User Avatar
    1
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    You can custom, replace or delete styles if you need.

    See:https://docs.abp.io/en/abp/latest/UI/AspNetCore/Bundling-Minification#bundle-contributors

    For example:

    public class MyStyleContributor : BundleContributor
    {
        public override async Task ConfigureBundleAsync(BundleConfigurationContext context)
        {
            context.Files.RemoveAll(x => x.Contains("blazorise.bootstrap.css"));
    
            context.Files.ReplaceOne("/libs/css/a.css","/lib/css/b.css");
    
            context.Files.Add("/lib/css/my.css");
        }
    }
    
    Configure<AbpBundlingOptions>(options =>
    {
        options
            .StyleBundles
            .Add(BlazorLeptonThemeBundles.Styles.Global, bundle =>
            {
                bundle
                    .AddBaseBundles(BlazorStandardBundles.Styles.Global)
                    .AddContributors(typeof(MyStyleContributor));
            });
    });
    

    You should use CSS isolation for your own components

Made with ❤️ on ABP v9.1.0-preview. Updated on December 10, 2024, 06:38