Набор CSS/JS в одном файле в mvc при публикации с возможностью выпуска

Я создал приложение MVC. Когда я публикую приложение на Azure с параметром release, все загрузка файла css и js в одном пакете на странице. (Открыть исходный код страницы, затем отобразить одну ссылку для css).

Когда я публикую сайт с параметром Debug в профиле публикации, все CSS загружаются индивидуально.

Моя проблема заключается в том, что публикация сайта с темой версии выпуска неверно загружается, но с заданной функцией отладки правильно загружается тема. Я хочу опубликовать свое приложение только с параметром Release. Если кто-то столкнется с этой проблемой раньше и получит какое-либо решение, пожалуйста, помогите мне.

ОТВЕТЫ

Ответ 1

Я испытал это раньше, когда использую связывание.

Скажем, например, ваш файл css находится по адресу: /Content/css/css.css

Этот файл css затем ссылается на другой файл или, например, на изображение /Content/images/image1.png через url('../images/image1.png').

Затем вы настраиваете свой комплект css @ /bundles/css.

Все отлично работает в режиме отладки. Однако, когда вы устанавливаете <compilation debug="false" .... в свой web.config, неожиданно удаляются ссылки, сделанные в файле css. Если вы откроете консоль в инструментах Firebug/Chrome dev и проверьте сетевые вкладки, вы увидите ресурсы, которые не загружаются с неправильного URL.

Это происходит потому, что, когда режим отладки отключен, все файлы связаны и минимизируются, как если бы они были на производстве. В этом случае файл CSS будет в комплекте и обслуживаться с URL /bundles/css. Это приводит к нарушению относительной ссылки URL. Где он когда-то ссылался на /Content/images/image1.png, теперь он ссылается на /images/image1.png.

У вас есть несколько вариантов решения этой проблемы:

  • Служите ваши вложенные файлы css из той же папки, что и фактические файлы css. например. /Content/css/cssbundle. Это может стать очень утомительным.
  • Измените все относительные ссылки в ваших файлах css на абсолютные ссылки. например. ../images/image1.png станет /Content/images/image1.png. Это означает, что вы не можете использовать много сторонний CSS, поставляемый из коробки, вам нужно будет проверить/изменить относительные ссылки, если вы хотите связать их.
  • Используйте пакет BundleTransformer nuget. Он автоматически преобразует относительные URL-адреса в абсолютные во время процесса связывания.

    Основные отличия классов StyleTransformer и ScriptTransformer от стандартных реализаций: способность исключать ненужные активы при добавлении активов из каталога, не приводит к переоценке предварительно профинансированных активов, поддерживает автоматическое преобразование относительных путей до абсолютного значения в CSS-коде (с помощью UrlRewritingCssPostProcessor) и т.д.

Я лично рекомендую 3, так как это легче всего поддерживать на длительный срок.