I followed the tutorial in https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-8.0#additional-resources
And now the CSS isolation works well.
I have a problem that the CSS isolation style(just like this blow) is not minified.
<link href="{ASSEMBLY NAME}.styles.css" rel="stylesheet">
I’ve thought about minimizing it using a tool like BuildBundlerMinifier. However, it seems it is not a static file and it is generated dynamically so I can’t use a third-party tool to minimize it.
Is there any way that I can minimize it to make page access faster?
Thank you.
0
To my knowledge, there is no built-in support for achieving css isolation and minification at the same time, but it might be possible to find a workaround. You can try build events for this purpose, which would involve specifying a post build event and executing a command that will minify the specified file. Since this command will be executed after the build, the bundled css file from css isolation should be there.
The tool I will recommend is clean-css-cli
(https://www.npmjs.com/package/clean-css-cli), however you can use any library that will work via commands.
Install node.js (which will come with NPM), then install the library globally using NPM with this command:
npm install -g clean-css-cli
Then, add the post build event into your .csproj file (see https://learn.microsoft.com/en-us/visualstudio/ide/how-to-specify-build-events-csharp?view=vs-2022 for additional info on build events)
<Target Name="MinifyCSS" AfterTargets="PostBuildEvent">
<Exec Command="cleancss -o $(ProjectDir)binReleasenet7.0publishwwwrootcssstyle.min.css $(ProjectDir)binReleasenet7.0publishwwwrootcssstyle.css" />
</Target>
I will admit, this is a shot in the dark and I am currently not available to test this, but let me know if it works. You should review the path I specified. Keep in mind that you really don’t want to have minification in place during development (it will make debugging painful for no reason).
1