Brando Zhang
2021-01-05 19:22:02
According to this article, CSS isolation occurs at build time. During this process, Blazor rewrites CSS selectors to match markup rendered by the component. These rewritten CSS styles are bundled and produced as a static asset at {PROJECT NAME}.styles.css, where the placeholder {PROJECT NAME} is the referenced package or product name.
That means we could only disable the bundle not modify it during develop environment.
But after publish, it will generate the file like this:
You could modify the {PROJECT NAME}.styles.css to {other}.styles.css and modify the index.html css name as below:
<link href="{other}.styles.css" rel="stylesheet" />
Thanks to the your answer.
But, My published application files list different to the your attached image. In my case the index.html and the {PROJECT NAME}.styles.css didn't exists. Did you try in webassembly project? I am working on The Blazor Server.
You used blazor server side project?
Oh, Yes. I selected menu named 'Blazor Server App' when i create my project project on The Visual Studio. I was confused. Because of I am working on the style and script parts.
To add a little - you can use an MS build task (probably AfterBuild) to rename the compiled css file the framework will give you. With this, you get that to happen automatically instead of doing it manually.