计算相对路径更改

Question

假设我有以下行.css文件

body { background-image: url('../images/bg.png') } 

我的构建过程中做了一些CSS魔法和eventuall摆脱

~/Content/styles/styles.css 

这个文件要

~/temp/styles.css 

这会使文件中的url语句无效，并且需要重写为../Content/images/bg.png

这是我的问题 - 给定原始文件位置，文件中的新文件位置和背景图像url是否存在可重用的方式计算图像的新相对路径？

如果有人不知道css网址应该是相对于它所包含的css文件。

Answer 1

您可能考虑使用less来描述变量中的图像路径（将其预生成为构建的一部分）。那么你只有一件事要更新？

Answer 2

解决方案1 ​​

如果您使用ASP.NET主题，你可以解决这个问题。但是，这也意味着你将不得不重构你的文件。

只需添加一个App_Themes文件夹和一个带有主题名称的文件夹（'Default'对于只有一个主题的网站来说是一个不错的选择）。

添加您的主题名称为<pages>元素在web.config中：

<pages theme="Default"> 

然后把你的CSS文件的主题文件夹内。删除用于引用css文件的任何代码，因为ASP.NET会自动将它连接到所有页面。

如果您希望更多地控制您添加CSS的页面，您可以简单地将主题添加到页面上的@page指令，或者将代码隐藏在Page_PreInit事件的基本页面中，而不是Web .config文件。现在

，如果你也把下方的主题文件夹的图像，它们可以像这样从CSS引用：

background-image: url('Images/Buttons/login-sprite.gif'); 

这个例子假设你的图像文件中的位置

[AppFolder]/App_Themes/Default/Images/Buttons/login-sprite.gif 

和您的css文件位于

[AppFolder]/App_Themes/Default/Styles.css 

解决方案2

如果您不想重新排列文件，也可以动态生成文件或将其读入字符串，然后在调用ResolveUrl以确保您选择的令牌（示例＃MyImageFile＃）与实际的URL一致后它是正确的。

你可以把代码，例如这在名为Styles.aspx文件：

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 
    'This is a wrapper for the CSS file that allows us to inject 
    'any image URLs directly into the file, accounting for any relative 
    'path differences between different environments. 

    Dim FileName As String = Server.MapPath("Styles.css") 
    Dim sr As StreamReader 
    Dim contents As String 

    sr = File.OpenText(FileName) 
    Try 
     contents = sr.ReadToEnd 
    Finally 
     sr.Close() 
    End Try 


    'Now that we have the contents of the file, run our 
    'function on it to replace the tokens 
    contents = Me.ProcessConfigurationTokens(contents) 

    Response.Clear() 

    Response.AddHeader("content-type", "text/css") 
    Response.Write(contents) 
    Response.End() 

End Sub 

，然后切换到Styles.aspx从Styles.css中你的页面的引用。

这种方法存在性能问题，但可以使用缓存来抵消。不过，我认为使用主题是最好的方法，因为它可以单独使用框架解决问题，而无需编写任何额外的代码。