Blazor：包含主页脚本和样式的最佳方式是什么？
Blazor: what is the best way to include main page scripts and styles?
在默认的 Blazor 项目中，我们得到 Pages/_Host.cshtml 文件，其中包含类似 HTML 应用程序模板的内容。
最近我创建了我的第一个 Razor 组件库 (RCL) 并且它运行良好。
这是它的脚本部分：
<script src="_content/Woof.Blazor/js/woof.js"></script>
<script src="_content/Woof.Blazor/js/modal.js"></script>
<script src="_content/Woof.Blazor/js/input.js"></script>
<script src="_content/Woof.Blazor/js/datatable.js"></script>
<script src="_content/Woof.Blazor/js/autocomplete.js"></script>
这些脚本是手动包含在我的应用程序中的。图书馆有没有办法自动将这些文件添加到应用程序模板中？
顺便说一句，如果样式表也能自动添加就好了。
编辑：我刚刚尝试创建一个 _Scripts.cshtml 文件，但没有成功。 Visual Studio 显示了很多奇怪的错误，可能是由于缺少包引起的，但我不知道。使脚本部分成为局部视图？它实际上不是 MVC 的一部分。所以我可能错了。
我想要实现的是用一行替换上面的整个脚本部分，包括我库中所有预定义和预配置的脚本。
没有现成可用的东西来做你正在尝试的事情。原因是有时脚本和 CSS 标签的顺序真的很重要。
例如，如果我覆盖 Bootstrap 中的某些 类，但在 bootstrap 的文件标签之前包含我的 CSS 文件标签，那么它将不起作用。如果 CSS 和 JS 文件是自动的，将无法控制导致此问题的顺序。
根据你的问题，你列出了你的库中存在的几个脚本。我建议采取的方法是将这些脚本捆绑并缩小到一个文件中。然后您只需要在任何消费应用程序中添加一个引用。这也将加快消费应用程序的加载速度，它只需要加载一个脚本，而不是 5 个。
有多种方法可以实现这一点，但我认为目前最常见的是 webpack。快速 google 将调出 10 篇博客 post 显示此配置，例如 https://ideas.byteridge.com/webpack-minifying-your-production-bundle/。这一切都可以自动进入构建管道，因此可以与完整的 CI/CD 一起使用。
对于 CSS，您可以尝试我的库 - BlazorStyled (https://BlazorStyled.io)。它动态地将样式添加到您不需要包含在模板中的样式 sheet。还有其他好处，例如 - 您在组件中定义样式，永远不会有 css 冲突，因此您永远不需要再次使用 !important。如果你在 react/cue/angular 中使用了诸如情感或迷人之类的东西，它与那些相似。
在 css 的 .net 5 中，您可以使用 CSS Isolation。它为每个组件附加了css内容，但是对于js文件，你需要在_Host.cshtml中加载全部并且你不能单独加载它们，你可以稍后调用需要的js函数。
在默认的 Blazor 项目中，我们得到 Pages/_Host.cshtml 文件，其中包含类似 HTML 应用程序模板的内容。
最近我创建了我的第一个 Razor 组件库 (RCL) 并且它运行良好。 这是它的脚本部分：
<script src="_content/Woof.Blazor/js/woof.js"></script>
<script src="_content/Woof.Blazor/js/modal.js"></script>
<script src="_content/Woof.Blazor/js/input.js"></script>
<script src="_content/Woof.Blazor/js/datatable.js"></script>
<script src="_content/Woof.Blazor/js/autocomplete.js"></script>
这些脚本是手动包含在我的应用程序中的。图书馆有没有办法自动将这些文件添加到应用程序模板中？ 顺便说一句，如果样式表也能自动添加就好了。
编辑：我刚刚尝试创建一个 _Scripts.cshtml 文件，但没有成功。 Visual Studio 显示了很多奇怪的错误，可能是由于缺少包引起的，但我不知道。使脚本部分成为局部视图？它实际上不是 MVC 的一部分。所以我可能错了。
我想要实现的是用一行替换上面的整个脚本部分，包括我库中所有预定义和预配置的脚本。
没有现成可用的东西来做你正在尝试的事情。原因是有时脚本和 CSS 标签的顺序真的很重要。
例如，如果我覆盖 Bootstrap 中的某些 类，但在 bootstrap 的文件标签之前包含我的 CSS 文件标签，那么它将不起作用。如果 CSS 和 JS 文件是自动的，将无法控制导致此问题的顺序。
根据你的问题，你列出了你的库中存在的几个脚本。我建议采取的方法是将这些脚本捆绑并缩小到一个文件中。然后您只需要在任何消费应用程序中添加一个引用。这也将加快消费应用程序的加载速度，它只需要加载一个脚本，而不是 5 个。
有多种方法可以实现这一点，但我认为目前最常见的是 webpack。快速 google 将调出 10 篇博客 post 显示此配置，例如 https://ideas.byteridge.com/webpack-minifying-your-production-bundle/。这一切都可以自动进入构建管道，因此可以与完整的 CI/CD 一起使用。
对于 CSS，您可以尝试我的库 - BlazorStyled (https://BlazorStyled.io)。它动态地将样式添加到您不需要包含在模板中的样式 sheet。还有其他好处，例如 - 您在组件中定义样式，永远不会有 css 冲突，因此您永远不需要再次使用 !important。如果你在 react/cue/angular 中使用了诸如情感或迷人之类的东西，它与那些相似。
在 css 的 .net 5 中，您可以使用 CSS Isolation。它为每个组件附加了css内容，但是对于js文件，你需要在_Host.cshtml中加载全部并且你不能单独加载它们，你可以稍后调用需要的js函数。