.NET MVC Razor - 范围样式答案

【问题标题】：.NET MVC Razor - Scoped Styles.NET MVC Razor - 范围样式
【发布时间】：2018-01-17 17:13:53
【问题描述】：

目前我正在尝试在我的一个视图中使用部分视图，该视图使用 不同的 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>

有人知道解决方法吗？

【问题讨论】：

标签： javascript html css asp.net-mvc-4 razor

【解决方案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 为 wrapper 的 div。 Ans 如果你用 SASS 之类的东西编写你的 CSS（你真的应该是这样的！），那就更容易了：

div#wrapper {

    .red {
        background-color: red;
    }
    .some-other-style {
        display: block
    }
}

【讨论】：