.NET MVC Razor - Scoped Styles

Question

目前我正在尝试在我的一个视图中使用部分视图，该视图使用不同的 css样式表。但是，由于Razor中呈现样式的方式，主视图中的样式仍在继续：@Styles.Render("~/Content/css")只适用于所有内容，而且我似乎无法在Razor中找到任何关于作用域css的文档。

执行以下代码不起作用 - 我相信因为Razor只需放在头部即可处理Styles.Render。

<div>
    <style scoped>
        @Styles.Render("~/Content/othercss")
    </style>
    @Html.Partial("~\\Views\\Layouts\\blog.cshtml")
</div>

有没有人知道这方面的解决方法？

Answer 1

Styles.Render()为浏览器呈现链接标记以获取CSS文件，如下所示：

<link rel="stylesheet" type="text/css" href="https://whatever.css">

这不是style元素中预期的内容。您要做的是输出该CSS文件的内容，例如：

<style scoped>
    @Html.Raw(File.ReadAllText(Server.MapPath("~/Content/yourfile.css")))
</style>

请注意，这不是使用您的捆绑包，为此您需要访问捆绑包并以某种方式呈现（在此答案的范围之外）。

说完这一切后，请注意scoped属性的docs说明了这一点：

  

<强>非标准   此功能是非标准功能，不符合标准。不要在面向Web的生产站点上使用它：它不适用于每个用户。实现与我将来改变的行为之间可能存在很大的不兼容性。

     

<强>过时   此功能已过时。虽然它可能仍然适用于某些浏览器，但不鼓励使用它，因为它可以随时删除。尽量避免使用它。

更好的选择是首先确定CSS的范围。例如：

div#wrapper .red {
    background-color: red;
}

现在，此样式仅适用于ID为div的{​​{1}}。如果你在像SASS（你真的应该是！）这样的东西中写你的CSS，那就更容易了：

wrapper