Question

假设我有一个包含以下行的.css文件

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

我的构建过程执行了一些CSS魔术，并且eventuall从

移动此文件

~/Content/styles/styles.css

要

~/temp/styles.css

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

这是我的问题 - 考虑到原始文件位置，文件中的新文件位置和背景图像网址是否有可重用的方式来计算图像的新相对路径？

如果有人不知道css网址应该与css文件相关，那么它就包含在内。

Answer 1

解决方案1 

如果您使用ASP.NET主题，则可以解决此问题。但是，这也意味着您必须重新调整文件的方式。

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

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

<pages theme="Default">

然后将您的css文件放在主题文件夹中。删除用于引用css文件的任何代码，因为ASP.NET会自动将其连接到您的所有页面。

如果你想更多地控制你添加css的页面，你可以简单地将主题添加到页面上的@page指令，或者在Page_PreInit事件而不是web的基页中的代码中进行。配置文件。

现在，如果您还将图片放在主题文件夹下面，可以从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后将实际URL替换为您选择的标记（例如＃MyImageFile＃）以确保它是正确的。

您可以将此类代码放在名为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.css更改为Styles.aspx。

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

Answer 2

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

计算相对路径变化

2 个答案: