如何在 Blazor 中缩小 CSS 隔离？

Question

我按照 https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-8.0#additional-resources

中的教程进行操作

现在 CSS 隔离效果很好。

我有一个问题，CSS隔离样式（就像这个打击）没有缩小。

<link href="{ASSEMBLY NAME}.styles.css" rel="stylesheet">

我考虑过使用像 BuildBundlerMinifier 这样的工具来最小化它。但是，它似乎不是静态文件，而是动态生成的，因此我无法使用第三方工具来最小化它。

有什么方法可以最小化它以使页面访问更快吗？

谢谢你。

Answer 1

据我所知，没有内置支持同时实现 CSS 隔离和缩小，但也许可以找到解决方法。也许“构建事件”可以用于此目的。您可以指定一个 post build event 并执行一些命令来缩小指定的文件，并且由于它是在构建之后执行的，因此来自 css 隔离的捆绑 css 文件应该在那里。 我推荐的工具是

clean-css-cli

(

https://www.npmjs.com/package/clean-css-cli

)，但是您可以使用任何可通过命令行命令运行的库。 安装node.js（随NPM一起提供），然后使用NPM通过以下命令全局安装库：

npm install -g clean-css-cli

然后，将构建后事件添加到 .csproj 文件中（请参阅 

https://learn.microsoft.com/en-us/visualstudio/ide/how-to-specify-build-events-csharp?view=vs- 2022 年

有关构建事件的更多信息）

<Target Name="MinifyCSS" AfterTargets="PostBuild">
    <Exec Command="cleancss -o $(ProjectDir)wwwroot\css\style.min.css $(ProjectDir)wwwroot\css\style.css" />
</Target>

我承认，这是在黑暗中尝试，我目前无法对此进行测试，但请告诉我它是否有效。