Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

Blazor puts imports in bundled CSS in "wrong" order - can I control it?

$
0
0

We have an app with some CSS coming from QuickGrid and some from CSSes behind Blazor components. These are bundled into a "projectName.Components/frontendWeb".bundle.scp.css which imports QuickGrid.

App is started from a frontend project I will call "projectName.frontendWeb". This one has its own bundled CSS that starts with imports as below:

@import '_content/"projectName.Components"/"projectName.Components".bundle.scp.css';@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.bundle.scp.css';

Our problem is that we want the QuickGrid to be imported first, so that some parts can be overwritten by our own CSSes.Can we control the order of imports in bundled CSS?Both "projectName.frontendWeb" and "projectName.Components" refer to QuickGrid. I removed all references to QuickGrid from frontendWeb but import of QuickGrid still came after import of bundled CSS for "projectName.Components".

I also tried to change the order of package/project references in .csproj without success.

Edit:I tried layers. I added following to app.css (the first CSS in index.html) to force it consider QuickGrids as low priority:

@layer QuickGrids, my-css;@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.bundle.scp.css' layer(QuickGrids);

But it doesn't help as the automatically created bundled css adds import of QuickGrid without "layer(QuickGrids)".

I also tried adding a seperate file as the last css-reference with only that one, without success:

@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.bundle.scp.css' layer(QuickGrids);

Any other hints?


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>