Closed

MVC UI CSS Isolation #4831

WilliamT created 2 years ago

ABP Framework version: v6.0.1
UI type: MVC
DB provider: EF Core
Tiered (MVC) or Identity Server Separated (Angular): yes
Exception message and stack trace:
Steps to reproduce the issue:"

Hi, it is a follow up from this support ticket: https://support.abp.io/QA/Questions/4201/CSS-isolation-through-abp-MVC
I tried to follow the link provided but It still does not work.
Can someone assist?

9 Answer(s)

0

WilliamT created 2 years ago

In addition, this link https://asp.net-hacker.rocks/2021/05/10/aspnetcore6-08-css-isolation.html shows that I need to modify the _Layout.cshtml in order to work.

However, I upgraded my solution to use LeptonX theme and I don't have access to modify it.
0

liangshiwei created 2 years ago
Support Team Fullstack Developer

I will check it.
0

WilliamT created 2 years ago

by any chance,
can I get the code for the default _Layout.cshtml for LeptonX theme ?
with that I possibly can make the CSS isolation work.
0

liangshiwei created 2 years ago
Support Team Fullstack Developer

Hi,

Of course, you can use the ABP suite to download the LeptonX theme source code.
0

WilliamT created 2 years ago

Hi,

After some testing, I still cannot make it work.
Perhaps because ABP is slightly different under the hood.

Are you able to get it working?
0

liangshiwei created 2 years ago
Support Team Fullstack Developer

Hi,

It looks like a problem, I will check it out.

liangshiwei created 2 years ago

Support Team Fullstack Developer

Hi,

The CSS Isolation can't work with RazorRuntimeCompilation: https://github.com/dotnet/aspnetcore/issues/42411

ABP enable the RazorRuntimeCompilation by default, you can disable it:

public override void PreConfigureServices(ServiceConfigurationContext context)
{
    PreConfigure<AbpAspNetCoreMvcOptions>(options =>
    {
        options.EnableRazorRuntimeCompilationOnDevelopment = false;
    });
}

0

WilliamT created 2 years ago

Hi,

Thank you so much.
I will test it when i can.

Did you add _Layout.cshtml or just created the index.cshtml.css to make it work?

Regards,

liangshiwei created 2 years ago

Support Team Fullstack Developer

Hi,

Try this:

Configure<AbpBundlingOptions>(options =>
{
    // Replace MyCompanyName.MyProjectName.Web with your project name
    options.MinificationIgnoredFiles.Add("/MyCompanyName.MyProjectName.Web.styles.css");
    options.StyleBundles.Configure(
        LeptonXThemeBundles.Styles.Global,
        bundle =>
        {
            bundle.AddFiles("/MyCompanyName.MyProjectName.Web.styles.css");
        }
    );
});