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)
-
1
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
