Open Closed

How to add custom CSS files in solution and render them #5193

User avatar
0
Tisham.Ahuja created
  • ABP Framework version: v7.2.2
  • UI type: Blazor Server side assembly
  • DB provider: EF Core
  • Tiered (MVC): yes
  • Exception message and stack trace:
  • Steps to reproduce the issue: create a new solution. Add a custom css file and use classes added inside this file on controls in razor pages.

We need to add a new custom css filec (say site.css) and use classes from this file inside blazor pages. Need to know where this file should be added in project structure and how to refer to this file like we used to add a reference in index.html in non commercial solution. How this is done in commercial solution.

Go to accepted answer
23 Answer(s)
  • User Avatar
    0
    nlachmuthDev created

    Hi,

    you could use the BundleContributor to add your custom css file.

    Here is the documentation: https://docs.abp.io/en/abp/latest/UI/Blazor/Global-Scripts-Styles

    If you need futher assistance let me know.

    Kind regards Nico

  • User Avatar
    0
    Tisham.Ahuja created

    This solution says that we need to

    1. First add MyProjectBundleContributor : IBundleContributor
    2. add below in appsettings.json

    "AbpCli": { "Bundle": { "Mode": "BundleAndMinify", /* Options: None, Bundle, BundleAndMinify */ "Name": "global", "Parameters": { "ExcludeThemeFromBundle":"true" } } } 3) There is a reference to this article to run bundle command: https://docs.abp.io/en/abp/latest/CLI#bundle which asks to run below command:

    abp bundle

    I get below error: Unsupported project type. Project type must be Microsoft.NET.Sdk.BlazorWebAssembly.

    As I mentioned in ticket earlier as well: UI type: Blazor Server side assembly

    Please help.

  • User Avatar
    0
    nlachmuthDev created

    Sorry about that.

    First place your css file inside the wwwroot directory of the Blazor-Project.

    Then you can add the additional css to the ConfigureBundles-Method inside the BlazorModule of your solution.

    private void ConfigureBundles()
{
    Configure<AbpBundlingOptions>(options =>
    {
        // MVC UI
        options.StyleBundles.Configure(
            LeptonXThemeBundles.Styles.Global,
            bundle =>
            {
                bundle.AddFiles("/global-styles.css");
            }
        );

        // Blazor UI
        options.StyleBundles.Configure(
            BlazorLeptonXThemeBundles.Styles.Global,
            bundle =>
            {
                //**Add it to the bundle here**
                bundle.AddFiles("/blazor-global-styles.css");
                //You can remove the following line if you don't use Blazor CSS isolation for components
                bundle.AddFiles("/ABP.Support.UpdateAuditLogsMissing.Blazor.styles.css");
            }
        );
    });
}

    Hope that helps

  • User Avatar
    0
    Tisham.Ahuja created

    Can I add Javascript files as well here only? Or JS files need to be added somewhere else?

  • User Avatar
    0
    nlachmuthDev created

    You can add them there as well.

    Here is an example:

    private void ConfigureBundles()
{
    Configure<AbpBundlingOptions>(options =>
    {
        // MVC UI
        options.StyleBundles.Configure(
            LeptonXThemeBundles.Styles.Global,
            bundle =>
            {
                bundle.AddFiles("/global-styles.css");
            }
        );

        // Blazor UI
        options.StyleBundles.Configure(
            BlazorLeptonXThemeBundles.Styles.Global,
            bundle =>
            {
                bundle.AddFiles("/blazor-global-styles.css");
                //You can remove the following line if you don't use Blazor CSS isolation for components
                bundle.AddFiles("/ABP.Support.UpdateAuditLogsMissing.Blazor.styles.css");
            }
        );
        
        // Scripts
        options.StyleBundles.Configure(
            "MyGlobalBundle",
            bundle =>
            {
                bundle.AddFiles("/my-js.js");
            }
        );
    });
}

    You need to add the following line to the _Host.cshtml file in the Blazor Page:

    <abp-script-bundle name="MyGlobalBundle" />

    Also place the js file inside the wwwroot folder.

    Kind Regards Nico

  • User Avatar
    0
    Tisham.Ahuja created

    This has worked. Thank you :)

  • User Avatar
    0
    nlachmuthDev created

    No problem :)

  • User Avatar
    0
    Tisham.Ahuja created

    Bundles are not loading when running app in local. Also for few pages in deployed version Bundles are not loading.

    Any idea?

  • User Avatar
    0
    nlachmuthDev created

    For deployed app: Can you name some of the pages where the bundles are missing? Maybe the pages where the bundles dont load are MVC Pages. Then you would need to add the files also to the mvc global bundles.

    For local development: Does the browser try to load the resources? Do you get any errors that you could share?

  • User Avatar
    0
    Tisham.Ahuja created

    For deployed app: Bundles are missing in some of the custom razor components. However it gets loaded in a few components.

    For local development: I am not seeing any error.

  • User Avatar
    0
    nlachmuthDev created

    Just for clarification: You mean your added css and js files of the bundles? Rest of bundled css and js of lepton x is available?

  • User Avatar
    0
    Tisham.Ahuja created

    this is the code:

    private void ConfigureBundles() { Configure<AbpBundlingOptions>(options => { // MVC UI options.StyleBundles.Configure( BasicThemeBundles.Styles.Global, bundle => { bundle.AddFiles("/global-styles.css"); } );

            // Blazor UI
        options.StyleBundles.Configure(
            BlazorBasicThemeBundles.Styles.Global,
            bundle =>
            {
                bundle.AddFiles("/js/Scroll.js");
                bundle.AddFiles("/js/exporttoexcel.js");
                bundle.AddFiles("/js/Notify.js");
                bundle.AddFiles("/js/spinner.js");
                bundle.AddFiles("/site.css");
                bundle.AddFiles("/main.css");
                bundle.AddFiles("/blazor-global-styles.css");
                //You can remove the following line if you don't use Blazor CSS isolation for components
                bundle.AddFiles("/AppName.Blazor.styles.css");
            }
        );
    });
}
  • User Avatar
    0
    nlachmuthDev created

    you need to add the java script to the script bundles as explained above by me.

    you added them to the StyleBundles.

    correct would be:

    private void ConfigureBundles()
{
    Configure<AbpBundlingOptions>(options =>
    {
        // MVC UI
        options.StyleBundles.Configure(
        BasicThemeBundles.Styles.Global,
        bundle =>
        {
        bundle.AddFiles("/global-styles.css");
        }
    );

    // Blazor UI
    options.StyleBundles.Configure(
        BlazorBasicThemeBundles.Styles.Global,
        bundle =>
        {
            bundle.AddFiles("/site.css");
            bundle.AddFiles("/main.css");
            bundle.AddFiles("/blazor-global-styles.css");
            //You can remove the following line if you don't use Blazor CSS isolation for components
            bundle.AddFiles("/AppName.Blazor.styles.css");
        }
    );
    
    // Scripts
    options.StyleBundles.Configure(
        "MyGlobalBundle",
        bundle =>
        {
            bundle.AddFiles("/js/Scroll.js");
            bundle.AddFiles("/js/exporttoexcel.js");
            bundle.AddFiles("/js/Notify.js");
            bundle.AddFiles("/js/spinner.js");
        }
    );
}

    Also dont forget: You need to add the following line to the _Host.cshtml file in the Blazor Page:

    <abp-script-bundle name="MyGlobalBundle" /> Also place the js file inside the wwwroot folder.

    Once again here is the documentation: https://docs.abp.io/en/abp/latest/UI/Blazor/Global-Scripts-Styles

  • User Avatar
    0
    Tisham.Ahuja created

    I will try this

  • User Avatar
    0
    Tisham.Ahuja created

    you need to add the java script to the script bundles as explained above by me.

    you added them to the StyleBundles.

    correct would be:

    private void ConfigureBundles() 
{ 
    Configure<AbpBundlingOptions>(options => 
    { 
        // MVC UI 
        options.StyleBundles.Configure( 
        BasicThemeBundles.Styles.Global, 
        bundle => 
        { 
        bundle.AddFiles("/global-styles.css"); 
        } 
    ); 
 
    // Blazor UI 
    options.StyleBundles.Configure( 
        BlazorBasicThemeBundles.Styles.Global, 
        bundle => 
        { 
            bundle.AddFiles("/site.css"); 
            bundle.AddFiles("/main.css"); 
            bundle.AddFiles("/blazor-global-styles.css"); 
            //You can remove the following line if you don't use Blazor CSS isolation for components 
            bundle.AddFiles("/AppName.Blazor.styles.css"); 
        } 
    ); 
     
    // Scripts 
    options.StyleBundles.Configure( 
        "MyGlobalBundle", 
        bundle => 
        { 
            bundle.AddFiles("/js/Scroll.js"); 
            bundle.AddFiles("/js/exporttoexcel.js"); 
            bundle.AddFiles("/js/Notify.js"); 
            bundle.AddFiles("/js/spinner.js"); 
        } 
    ); 
}

    Also dont forget: You need to add the following line to the _Host.cshtml file in the Blazor Page:

    <abp-script-bundle name="MyGlobalBundle" /> Also place the js file inside the wwwroot folder.

    Once again here is the documentation: https://docs.abp.io/en/abp/latest/UI/Blazor/Global-Scripts-Styles

    Hi,

    Above solution you have provided is not working .. !! To be specific ..

    For deployed app: Bundles are missing in some of the custom razor components. However it gets loaded in a few components. (CSS is getting applied to like one or two page only)

    For local development: I am not seeing any error.

    Could you guys .. provide me a proper solution .. so that.. what ever CSS and JS files those I am using ..should get loaded once i build..!

  • User Avatar
    0
    nlachmuthDev created

    Hi,

    I tested the solution provided above with a fresh project with blazor server side and tiered and it worked. Wouldn´t propose it if not. My guess would be there might be another issue in the project.

    But for your question

    Could you guys .. provide me a proper solution .. so that.. what ever CSS and JS files those I am using ..should get loaded once i build..!

    One think you can do to always add your css/js files is to include them directly in the _Host.cshtml like this (see the link and script element in head):

    If you still face issues with that solution there must be some other reason. It would help then if you send a zip of the project to me ( nico@chrobyte.de ) so i can help you fix it.

    Kind regards Nico

  • User Avatar
    0
    Tisham.Ahuja created

    Hi Nico,

    I tried adding these files directly in _host.cshtml file as well. Still it is not working.

    Can we pls connect on call?

  • User Avatar
    0
    Tisham.Ahuja created

    We can join team or Zoom meeting or over other any channel.

  • User Avatar
    0
    nlachmuthDev created

    Hi,

    sorry to hear that this still does not work. Please e-mail support@abp.io for further assistance for this problem.

    Kind regards Nico

  • User Avatar
    0
    Tisham.Ahuja created

    Structure of our Blazor project is shown in below screenshot. We have a folder “js” inside wwwroot where we have kept few custom javascript files (exporttoexcel.js, Notify.js, Scroll.js & spinner.js)

    We are trying to create a bundle for these files using below code inside BlazorModule.cs:

    options.StyleBundles.Configure( "MyGlobalBundle", bundle => { bundle.AddFiles("/global.js"); bundle.AddFiles("/js/Scroll.js");
    bundle.AddFiles("/js/exporttoexcel.js"); bundle.AddFiles("/js/Notify.js"); bundle.AddFiles("/js/spinner.js"); } );

    In above code we are naming the bundle using BlazorBasicThemeBundles.Styles.Global. Below is the variable declaration for this (default one by ABP). public static class Styles { public static string Global = "Blazor.BasicTheme.Global"; }

    Similarly, we have CSS files present inside wwwroot folder. And code added to create bundle for this is:

    // Blazor UI options.StyleBundles.Configure( BlazorBasicThemeBundles.Styles.Global, bundle => { bundle.AddFiles("/global.css"); bundle.AddFiles("/site.css"); bundle.AddFiles("/main.css"); bundle.AddFiles("/blazor-global-styles.css"); bundle.AddFiles("/SG.RISE.Blazor.styles.css"); } );

  • User Avatar
    0
    Tisham.Ahuja created

    Still bundles are not loaded for few components.

  • User Avatar
    0
    Tisham.Ahuja created

    Validations are also not working as we have some code written in JS files.

  • User Avatar
    0
    nlachmuthDev created

    Hi,

    try to change this:

    options.StyleBundles.Configure(
"MyGlobalBundle",
bundle =>
{
bundle.AddFiles("/global.js");
bundle.AddFiles("/js/Scroll.js");
bundle.AddFiles("/js/exporttoexcel.js");
bundle.AddFiles("/js/Notify.js");
bundle.AddFiles("/js/spinner.js");
}
);

    To this:

    options.ScriptBundle.Configure(
"MyGlobalBundle",
bundle =>
{
bundle.AddFiles("/global.js");
bundle.AddFiles("/js/Scroll.js");
bundle.AddFiles("/js/exporttoexcel.js");
bundle.AddFiles("/js/Notify.js");
bundle.AddFiles("/js/spinner.js");
}
);

    The rest seems ok. If you still face the issue that its not working for some components contact support@abp.io for onsite support. There must be another problem why your added css and js is not available for these components.

Assignee
User avatar nlachmuthDev
Labels
None yet
Made with ❤️ on ABP v9.1.0-preview. Updated on November 01, 2024, 05:35