Open Closed

CSS file issues with MVC when deployed #8824

User avatar
0
Bryan-EDV created

  • ABP Framework version: v9.0.2

  • UI Type: Angular / MVC

  • Database System: EF Core (SQL Server, Oracle, MySQL, PostgreSQL, etc..) / MongoDB

  • Tiered (for MVC) or Auth Server Separated (for Angular): yes

  • Exception message and full stack trace:

  • Steps to reproduce the issue:

Hi team,

previously i had followed these instructions to add missing CSS files into our backend ABP https://abp.io/support/questions/8551/Angular-CSS-files

However, they are not working again , my guess its after the update to ABP 9.0.2

you can see in the screenshot that bootstrap-light.css style in my code base is:

image.png

but when deployed: (there's no import)

image.png

This is my Backend csproj code ->

<Project Sdk="Microsoft.NET.Sdk.Web">

<Import Project="....\common.props" />

<PropertyGroup>
<TargetFramework>net9.0</TargetFramework>
<Nullable>enable</Nullable>
<AspNetCoreHostingModel>InProcess</AspNetCoreHostingModel>
<RootNamespace>Eduverse</RootNamespace>
<PreserveCompilationReferences>true</PreserveCompilationReferences>
</PropertyGroup>

<PropertyGroup Condition=" '$(RunConfiguration)' == 'Eduverse.HttpApi.Host' " />

<ItemGroup>
<PackageReference Include="AspNetCore.HealthChecks.UI" Version="9.0.0" />
<PackageReference Include="AspNetCore.HealthChecks.UI.Client" Version="9.0.0" />
<PackageReference Include="AspNetCore.SignalR.OpenTelemetry" Version="1.6.0" />
<PackageReference Include="Microsoft.EntityFrameworkCore.InMemory" Version="9.0.1" />
<PackageReference Include="AspNetCore.HealthChecks.UI.InMemory.Storage" Version="9.0.0" />
<PackageReference Include="OpenTelemetry.Exporter.Console" Version="1.11.1" />
<PackageReference Include="OpenTelemetry.Exporter.OpenTelemetryProtocol" Version="1.11.1" />
<PackageReference Include="OpenTelemetry.Extensions.Hosting" Version="1.11.1" />
<PackageReference Include="OpenTelemetry.Instrumentation.AspNetCore" Version="1.11.0" />
<PackageReference Include="OpenTelemetry.Instrumentation.Http" Version="1.11.0" />
<PackageReference Include="Owl.TokenWildcardIssuerValidator" Version="1.0.0" />
<PackageReference Include="Serilog.AspNetCore" Version="9.0.0" />
<PackageReference Include="Serilog.Sinks.Async" Version="2.1.0" />
<PackageReference Include="Microsoft.AspNetCore.Authentication.Google" Version="9.0.1" />
<PackageReference Include="Microsoft.AspNetCore.Authentication.MicrosoftAccount" Version="9.0.1" />
<PackageReference Include="Microsoft.AspNetCore.Authentication.Twitter" Version="9.0.1" />
</ItemGroup>

<ItemGroup>
<PackageReference Include="Volo.Abp.AspNetCore.MultiTenancy" Version="9.0.2" />
<PackageReference Include="Volo.Abp.Autofac" Version="9.0.2" />
<PackageReference Include="Volo.Abp.AspNetCore.Serilog" Version="9.0.2" />
<PackageReference Include="Volo.Abp.BlobStoring.Aws" Version="9.0.2" />
<PackageReference Include="Volo.Abp.Caching.StackExchangeRedis" Version="9.0.2" />
<PackageReference Include="Volo.Abp.Swashbuckle" Version="9.0.2" />
</ItemGroup>

<ItemGroup>
<PackageReference Include="Volo.Abp.Account.Pro.Public.Web.OpenIddict" Version="9.0.2" />
<PackageReference Include="Volo.Abp.Account.Pro.Public.Web.Impersonation" Version="9.0.2" />
</ItemGroup>

<ItemGroup>
<PackageReference Include="Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonX" Version="4.0.3" />
</ItemGroup>

<ItemGroup>
<ProjectReference Include="..\Eduverse.Application\Eduverse.Application.csproj" />
<ProjectReference Include="..\Eduverse.HttpApi\Eduverse.HttpApi.csproj" />
<ProjectReference Include="..\Eduverse.EntityFrameworkCore\Eduverse.EntityFrameworkCore.csproj" />
</ItemGroup>

<ItemGroup>
<PackageReference Include="Volo.Abp.Studio.Client.AspNetCore" Version="0.9.19" />
</ItemGroup>

<ItemGroup Condition="Exists('./openiddict.pfx')">
<None Remove="openiddict.pfx" />
<EmbeddedResource Include="openiddict.pfx">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</EmbeddedResource>
</ItemGroup>

<ItemGroup>
<Compile Remove="Logs*" />
<Content Remove="Logs*" />
<EmbeddedResource Remove="Logs*" />
<None Remove="Logs*" />
</ItemGroup>
<ItemGroup>
<Content Include="Pages**.js">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</Content>
<Content Include="Pages**.css">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</Content>
</ItemGroup>
<ItemGroup>
<Content Include="Themes**.js">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</Content>
<Content Include="Themes**.css">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</Content>
</ItemGroup>
</Project>

Go to accepted answer
1 Answer(s)
  • User Avatar
    0
    enisn created
    Support Team .NET Developer

    Hi,

    Do you use BundleMode as BundleAndMinify in the release mode?

    Can you check if bootstrap-light.css file is included in the bundle?

    If not you can add your custom file into LeptonXbundle, which is pre-configured in your ...Module.cs file by default, you can inlcude custom files by using StyleBundles.Add():

    Configure<AbpBundlingOptions>(options =>
{
    options.StyleBundles.Configure(
        LeptonXThemeBundles.Styles.Global,
        bundle =>
        {
            bundle.AddFiles("/global-scripts.js");
            bundle.AddFiles("/global-styles.css");

            // 👇 Add your own customizations here for bundling & minifying
            bundle.AddFiles("/custom/bootstrap-light.css");
        }
    );
});

    https://abp.io/docs/latest/framework/ui/mvc-razor-pages/bundling-minification#bundle-inheritance

Assignee
No one
Labels
None yet
Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
Do you need assistance from an ABP expert?
Schedule a Meeting
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v9.2.0-preview. Updated on March 17, 2025, 10:38