Расчет Относительный путь Изменение

Question

Предполагая, что у меня есть .css файл со следующей строкой

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

Мой процесс сборки делает некоторые CSS магии и eventuall переместить этот файл из

~/Content/styles/styles.css 

Для

~/temp/styles.css 

Это аннулирует оператор url в файле и требует перезаписи на ../Content/images/bg.png

Это мой вопрос - учитывая исходное местоположение файла, новое местоположение файла и URL-адрес фонового изображения в файле, есть ли способ повторного использования для вычисления нового относительного пути для изображения?

В случае, если кто-то не знает, что URL-адреса css должны быть относительно файла css, в котором он содержится.

Answer 1

Вы можете использовать less для описания пути изображения в переменной (предварительно создавая это как часть сборки). Тогда у вас есть только одна вещь для обновления?

Answer 2

Решение 1

При использовании темы ASP.NET, вы можете обойти эту проблему. Тем не менее, это также означает, что вам придется реструктурировать то, как ваши файлы.

Просто добавьте папку App_Themes и папку под ней с именем темы («По умолчанию» будет хорошим выбором для сайта с 1 темой).

Добавить название темы в <pages> элемент в web.config:

<pages theme="Default"> 

Затем поместите файл CSS внутри папки темы. УДАЛИТЕ любой код, который вы используете для ссылки на файл css, потому что ASP.NET автоматически подключит его ко всем вашим страницам.

Если вы хотите больше контролировать страницы, на которые вы добавляете css, вы можете просто добавить тему в директиву @page на страницах или сделать это в коде на своей базовой странице в событии Page_PreInit, а не в Интернете .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 

Solution 2

Если вы предпочитаете не менять ваши файлы, вы также можете динамически генерировать файл или читать его в строку и заменять маркер по вашему выбору (пример # MyImageFile #) фактическим URL-адресом после вызова ResolveUrl, чтобы сделать уверен, что это правильно.

Вы можете поместить код, такие как это в файле с именем 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 - лучший подход, потому что он решает проблему, используя только одну структуру без написания дополнительного кода.