Cache Busting with CSS Isolation and a component library - Blazor Webasm

Hi,

Firstly apologies, this may be more of a question/feature request than a bug, but I wasn’t quite sure where to put it.

I have a ASP.Net hosted Blazor web assembly application. I’m trying to cache bust the JS and CSS files in my project because I’m struggling to get the browser to refresh them when I redeploy. In desktop I can refresh with CTRL-F5, but this is not so easy in mobile browsers and my application can go screwy if it doesn’t have the latest files and obviously end users will struggle to clear the cache.

I have read the two similar issues: #27047 and #27966 and have implemented my own cache busting on the ASP.Net side by adding a version in the URL as a query parameter. I did this by hosting Blazor in razor page and using a function to add a version where required.

This seems to work OK, but I have a component library project in my solution and I’m not sure how I can do the same for the CSS generated by CSS isolation in the component library (“_content/ClassLib/ClassLib.bundle.scp.css”),

Currently this is included “automatically” by using an @import statement at the top of the main project;s ‘bundled’ CSS which I don’t seem to have any control of. I believe my 2 options are:

1. Include a version on the @import, however this is created by the Blazor tooling so as far as I know I have no way of doing it.
2. Stop Blazor generating the @import statement and include it myself in the hosting razor page as per all the other CSS.

Can you advise if either option is possible or you have any other suggestion? In regard to option 2 I’ve found the DisableScopedCssBundling property, but I presume this stops the CSS being generated at all?

Thanks in advance! LJ

[javiercn]

I presume that disabling built-in bundling will disable the whole process, including putting the isolated CSS together into one file, as well as the adding of the import statement? Is there’s no way of continuing to bundle the CSS but not insert the import statement? If not, can I request it, or some way of post-processing the bundle files.

That is correct, we either produce a bundle or not.

The extensibility that we offer is that you can disable or built-in bundling an create your own MSBuild task to handle the bundling process yourself, we don’t plan to offer any sort of “partial” bundling, since it complicates the implementation a lot and we haven’t heard a significant demand for it.

The other option you suggest is to edit the file. I’m trying to automate this so that I don’t have to manually edit every time a file changes. My solution for the other files is to use a file hash as a query parameter, and I could do the same here if I can run a build step to edit the file for me. So I guess I could write some code and run it as a post-build to add the version, but would that work given the files are bundled into the obj folder?

There’s no problem as long as you do it right after the file has been bundled. You can use MSBuild structured log viewer to see where the file is generated and hook your own target to run after that.

[javiercn]

@LaughingJohn thanks for contacting us.

There are two things you can do here:

• Disable our built-in bundling and use a more advance bundler like webpack or rollup.
• Edit the file right after it has been generated to add a version to the imports we include.