Can I configure or minimize CSS isolation bundled file in Razor Pages? [ASP.NET Core 6.0]

Question

I want my bundled css file "~/MyRazorPagesApp.styles.css", which is created by css isolation, to be minimized.

I am using Web Compiler 2022+, which compiles and minimizes my .scss files, but the bundled file only includes the non-optimized ones.

I have this structure:

Index.cshtml
Index.cshtml.scss
Index.cshtml.css
Index.cshtml.min.css

but as I said, the outcome of css isolation is not optimized.

Can I somehow configure it to use "min.css" files, or minimize the whole css file after? In my local development I can't even see this file in wwwroot directory.

user_17124525 · Answer

Css isolation can only find .css, not min.css. So your bundled css file "~/MyRazorPagesApp.styles.css" only includes the non-optimized ones. And 'MyRazorPagesApp.styles.css' is dynamically generated，so in your local development your can't even see this file in wwwroot directory.

If you want to use "min.css" files, you can put "min.css" files into the Web Root (wwwroot) folder and add reference like into _layout.cshtml .

Another solution refer to Bundle and minify static assets in ASP.NET Core, ASP.NET Core is compatible with WebOptimizer, an open-source bundling and minification solution . You can refer WebOptimizer to minimize the css file( non-optimized ones) and bind.

For example:

In programs, bundle /css/site.css and /css/Index.cshtml.min.css into a single output file /Indexcshtml.min.css

builder.Services.AddWebOptimizer(pipeline =>
{
    pipeline.AddCssBundle("/Indexcshtml.min.css", "/css/site.css", "/css/Index.cshtml.min.css");
});

//...
app.UseWebOptimizer();

Besides, the link reference goes in the layout file, just like other global style sheet refer,you also need to add add reference like into _layout.cshtml.

result:

Can I configure or minimize CSS isolation bundled file in Razor Pages? [ASP.NET Core 6.0]

1 Answers