Почему мой пакет CSS не работает с загруженным приложением MVC4 с помощью bin?

У меня bin развернул приложение MVC4 для моего хостинг-провайдера на основе рекомендаций, приведенных здесь, и одного или двух исправлений "на лету", но наиболее очевидной проблемой является то, что пакет для css не работает. Когда я заменяю reflex с явным файлом refs, мой css работает снова.

Я использую стандартный шаблон проекта MVC4 RTM от VS2012. Поставщик работает с IIS 7.5 и ASP.NET 4, и моя предыдущая версия MVC3 того же приложения отлично работала. Я предполагаю, что я схватил зависимость где-то слишком низкой версии, и это может также способствовать моей проблеме ссылок на тему, основанной на области.

Технические симптомы:

Линия @Styles.Render("~/Content/css") отображается как <link href="/Content/css?v=" rel="stylesheet"/>

ОТВЕТЫ

Ответ 1

Связывание CSS и Script должно работать независимо от того, работает ли .NET 4.0 или 4.5. Я запускаю .NET 4.0, и он отлично работает для меня. Однако для того, чтобы заставить поведение минимизации и связывания работать, ваш web.config должен быть настроен так, чтобы он не работал в режиме отладки.

<compilation debug="false" targetFramework="4.0">

Возьмите этот пакет для примера jQuery UI в файле _Layout.cshtml.

@Styles.Render("~/Content/themes/base/css")

Если я запускаю с debug="true", я получаю следующий HTML.

<link href="/Content/themes/base/jquery.ui.core.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.resizable.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.selectable.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.accordion.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.autocomplete.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.button.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.dialog.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.slider.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.tabs.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.datepicker.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.progressbar.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.theme.css" rel="stylesheet"/>

Но если я запускаю с debug="false". Я возьму это вместо этого.

<link href="/Content/themes/base/css?v=myqT7npwmF2ABsuSaHqt8SCvK8UFWpRv7T4M8r3kiK01" rel="stylesheet"/>

Это функция, позволяющая легко отлаживать проблемы с вашими файлами Script и CSS. Я использую RTM MVC4.

Если вы считаете, что это может быть проблема зависимости MVC, я бы рекомендовал перейти в Nuget и удалить все связанные с MVC пакеты, а затем выполнить поиск пакета Microsoft.AspNet.Mvc и установить его. Я использую самую последнюю версию, и она появляется как v.4.0.20710.0. Это должно захватить все зависимости, которые вам нужны.

Также, если вы использовали MVC3 и теперь пытаетесь использовать MVC4, вы захотите войти в свой web.config и обновить свои ссылки, чтобы указать на версию MVC 4.0. Если вы не уверены, вы всегда можете создать новое приложение MVC4 и скопировать web.config. Не забывайте, что web.config в папках "Виды/области", если вы это сделаете.

UPDATE: Я обнаружил, что вам нужно установить пакет Nuget Microsoft.AspNet.Web.Optimization, установленный в вашем проекте. Он включается по умолчанию в приложение RTM MVC4 независимо от того, укажите ли вы целевую структуру как 4.5 или 4.0. Это пространство имен, в которое включены классы связывания, и, похоже, не зависит от структуры. Я развернулся на сервер, на котором не установлен 4.5, и он по-прежнему работает, как и ожидалось для меня. Просто убедитесь, что DLL развернута вместе с остальной частью вашего приложения.

Ответ 2

ОБНОВЛЕНИЕ 11/4/2013:

Причина, по которой это происходит, заключается в том, что у вас есть .js или .css в конце имени вашего пакета, из-за чего ASP.NET не запускает запрос через MVC и BundleModule.

Рекомендуемый способ исправить это для лучшей производительности - удалить .js или .css из вашего имени пакета.

Итак /bundle/myscripts.js становится /bundle/myscripts

В качестве альтернативы вы можете изменить свой web.config в разделе system.webServer для запуска этих запросов через BundleModule (который был моим первоначальным ответом)

<modules runAllManagedModulesForAllRequests="true">
  <remove name="BundleModule" />
  <add name="BundleModule" type="System.Web.Optimization.BundleModule" />
</modules>

Изменить: я также заметил, что если имя заканчивается на "css" (без точки), это тоже проблема. Мне пришлось изменить имя пакета из "DataTablesCSS" в "DataTablesStyles", чтобы исправить мою проблему.

Ответ 3

Чтобы прояснить несколько вещей, System.Web.Optimization (aka Bundling/Minification) будет работать против 4.0. Это не зависит от чего-либо в 4.5, поэтому проблем там не должно быть.

Если пакет script работает, и это единственная проблема с CSS, возможно, проблема связана с относительными URL-адресами?

Сначала я посмотрю на визуализированную страницу и посмотрю, получаете ли вы ссылки на набор CSS, например:

<link href="/app/Content/css?v=oI5uNwN5NWmYrn8EXEybCI" rel="stylesheet"/>

Если вы есть, тогда соединение работает, но что-то внутри вашего набора CSS запутано. Обычно это связано с неправильными относительными URL-адресами внутри вашего пакета CSS, т.е. Если ваши изображения живут под ~/Content, но вы называете свой пакет ~/bundles/css, браузер будет неправильно искать изображения под ~/bundles.

Кроме того, поведение по умолчанию заключается в отключении связывания и минимизации при debug=true. Итак, если вы хотите, чтобы оптимизация включалась даже тогда, когда debug=true, вам нужно заставить:

BundleTable.EnableOptimizations = true

Обновлено: С новой информацией, которая v="", это означает, что пучок пуст, вы должны убедиться, что вы правильно добавляете файлы в пакет, и что он их нашел. Как вы включаете файлы в пакет?

Ответ 4

Обиение runAllManagedModulesForAllRequests="true" также сработало для меня. Добавьте в конфигурацию web.config следующую конфигурацию:

<modules>
  <remove name="BundleModule" />
  <add name="BundleModule" type="System.Web.Optimization.BundleModule" />
</modules>

runAllManagedModulesForAllRequests будет наноситься удары по производительности на вашем веб-сайте, если они не будут использоваться соответствующим образом. Проверьте эту статью.

Ответ 5

Другое дело, что ссылки не могут иметь одно и то же имя. Например, если у вас есть jQuery UI в каталоге libraries и скомпилируйте его файл JavaScript следующим образом:

bundles.Add(new ScriptBundle("~/libraries").Include("~/libraries/jquery-ui/jqyery-ui.js"));

а затем попытайтесь связать его файлы CSS следующим образом:

bundles.Add(new StyleBundle("~/libraries").Include("~/libraries/jquery-ui/jqyery-ui.css"));
...

он потерпит неудачу. Они должны иметь уникальные имена. Сделайте что-то вроде ScriptBundle("~/libraries/js")... и ScriptBundle("~/libraries/css")... или что-то еще.

Ответ 6

Как дополнение к существующим ответам, ни одна из которых не работала для меня, я нашел свое решение ЗДЕСЬ:

https://bundletransformer.codeplex.com/discussions/429707

Решение было

  • щелкните правой кнопкой мыши бездействующие файлы в visual studio
  • Выбрать свойства
  • Отметьте Build Action как Content
  • передислоцировать

Мне не нужно было удалять обработчики без расширения (как это можно найти в других решениях в Интернете)

Мне не нужно было добавлять параметр <add name="BundleModule" type="System.Web.Optimization.BundleModule" /> web.config.

Надеюсь, это поможет!

Ответ 7

Я столкнулся с той же проблемой с CSS в живой среде. Я следил за всем советом здесь и исследовал, как скрепление работает за сценой. Это заставило меня запросить очистку кэша .Net(у меня не было доступа к серверам приложений), из-за чего соединение начало работать на серверах приложений. Однако при доступе к сайту с помощью балансировщика нагрузки с сконфигурированным CDN, хотя идентификатор пакета был обновлен в URL-адресе, в комплекте был старый CSS. Простое удаление CDN разрешило проблему.

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

Ответ 8

Один из моих файлов css имел символ _ _ в имени файла, который вызвал проблемы.

Переименовано your_style.css в yourstyle.css

Ответ 9

Только для истории:

Убедитесь, что все упомянутые меньше /css файлы в комплекте имеют Build Action = "Content".

Нет ошибки, если некоторые файлы из пакета отсутствуют на целевом сервере.

Ответ 10

У меня была такая же проблема, и это оказалось глупой ошибкой, файлы css не были включены в проект, поэтому они не были опубликованы, убедитесь, что вы просматриваете все файлы в решении и добавляете их в проект.

Ответ 11

имена css должны быть согласованными.

Имена jqueryUI css не являются "jquery.ui.XXX" в папке "Содержание/темы/база".

так что это должно быть:

не так:

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                                    "~/Content/themes/base/jquery.ui.core.css",
                                    "~/Content/themes/base/jquery.ui.resizable.css",
                                    "~/Content/themes/base/jquery.ui.selectable.css",
                                    "~/Content/themes/base/jquery.ui.accordion.css",
                                    "~/Content/themes/base/jquery.ui.autocomplete.css",
                                    "~/Content/themes/base/jquery.ui.button.css",
                                    "~/Content/themes/base/jquery.ui.dialog.css",
                                    "~/Content/themes/base/jquery.ui.slider.css",
                                    "~/Content/themes/base/jquery.ui.tabs.css",
                                    "~/Content/themes/base/jquery.ui.datepicker.css",
                                    "~/Content/themes/base/jquery.ui.progressbar.css",
                                    "~/Content/themes/base/jquery.ui.theme.css"));

правильный:

            bundles.Add(new StyleBundle("~/Bundles/themes/base/css").Include(
                                    "~/Content/themes/base/core.css",
                                    "~/Content/themes/base/resizable.css",
                                    "~/Content/themes/base/selectable.css",
                                    "~/Content/themes/base/accordion.css",
                                    "~/Content/themes/base/autocomplete.css",
                                    "~/Content/themes/base/button.css",
                                    "~/Content/themes/base/dialog.css",
                                    "~/Content/themes/base/slider.css",
                                    "~/Content/themes/base/tabs.css",
                                    "~/Content/themes/base/datepicker.css",
                                    "~/Content/themes/base/progressbar.css",
                                    "~/Content/themes/base/theme.css"));

Я пробовал в MVC5 и работал успешно.

Ответ 12

Я столкнулся с этой проблемой при развертывании кода на сайтах Azure. это сработало, когда я развернул сборку с visualstudio.com, и не был, когда я попытался опубликовать сборку из visual studio 2013. Основная проблема - CSS Minification. Я полностью согласен с первым ответом на этот вопрос. но подумал о совместном решении, которое сработало для меня, может быть, это поможет вам в его исправлении.

в основном, когда мы развертываем через VSO, он генерирует файлы миниатюр для css, js, нося в system.web.Optimization, но когда мы публикуем сборку с VS 2013, мы должны позаботиться о ниже. bundling-and-minification 1. Убедитесь, что структура папок и соглашение об именовании вашего поставщика должны быть разными. что-то вроде этого.

bundles.Add(new StyleBundle("~/Content/materialize/mcss").Include(
                  "~/Content//materialize/css/materialize.css"));

2. добавьте в нижней части вашего определения bundleconfig

public static void RegisterBundles(BundleCollection bundles)
{
  bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
             "~/Scripts/jquery-{version}.js"));

   // Code removed for clarity.
   BundleTable.EnableOptimizations = true;
}

3. не забудьте добавить debug false в web.config(при запуске локальной отладки VS2013 вы получите всплывающее сообщение о том, что вам нужно обязательно вернуть его, прежде чем развертывать в prod, что само объясняет многое.

<system.web>
  <compilation debug="true" />
  <!-- Lines removed for clarity. -->
</system.web>

Ответ 13

С Visual Studio 2015 я обнаружил, что проблема вызвана ссылкой на версию .min-версии файла javascript в BundleConfig, когда debug = true задано в файле web.config.

Например, с jquery, указывающим следующее в BundleConfig:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.min.js"));

привел к тому, что jquery не загружался правильно, когда debug = true был установлен в файле web.config.

Ссылка на неинфицированную версию:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));

исправляет проблему.

Настройка debug = false также исправляет проблему, но, конечно, это не совсем полезно.

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

Ответ 14

попробуйте следующее:

    @System.Web.Optimization.Styles.Render("~/Content/css")
    @System.Web.Optimization.Scripts.Render("~/bundles/modernizr")

Это со мной работало. Я все еще участвую, и я еще не понял, почему это происходит.

Ответ 15

Чтобы добавить полезную информацию в разговор, я столкнулся с 404 ошибками для своих пакетов в развертывании (это было хорошо в локальной среде разработчиков).

Для имен пакетов, включая номера версий, такие как:

bundles.Add(new ScriptBundle("~/bundles/jquerymobile.1.4.3").Include(
...
);

По прихоти я удалил все точки, и все снова работало волшебным образом:

bundles.Add(new ScriptBundle("~/bundles/jquerymobile143").Include(
...
);

Надеюсь, что это поможет кому-то сэкономить время и разочарование.

Ответ 16

Вам нужно добавить этот код в общий вид

@@Scripts.Render( "~/расслоения/плагины" ) @    enter code here                                                                                            enter code here              @RenderSection ( "скрипты", обязательно: false)   @RenderSection ( "HeaderSection", обязательно: false)

Ответ 17

У меня была эта проблема, добавляя некоторые пакеты из nuget и забыв сделать обновление

Итак, сначала сделайте обновление всех пакетов, установленных в проекте

Update-Package

В Global.asax.cs добавьте следующий

BundleTable.EnableOptimizations = true;

Ответ 18

Это решило мою проблему. Я добавил эти строки в _layout.cshtml

@*@Scripts.Render("~/bundles/plugins")*@
<script src="/Content/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Kendo JS -->
<script src="/Content/kendo/js/kendo.all.min.js" type="text/javascript"></script>
<script src="/Content/kendo/js/kendo.web.min.js" type="text/javascript"></script>
<script src="/Content/kendo/js/kendo.aspnetmvc.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<!-- Morris.js charts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="/Content/plugins/morris/morris.min.js"></script>
<!-- Sparkline -->
<script src="/Content/plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="/Content/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/Content/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart -->
<script src="/Content/plugins/knob/jquery.knob.js"></script>
<!-- daterangepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="/Content/plugins/daterangepicker/daterangepicker.js"></script>
<!-- datepicker -->
<script src="/Content/plugins/datepicker/bootstrap-datepicker.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="/Content/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<script src="/Content/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/Content/plugins/fastclick/fastclick.min.js"></script>
<!-- AdminLTE App -->
<script src="/Content/dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/Content/dist/js/demo.js"></script>
<!-- Common -->
<script src="/Scripts/common/common.js"></script>
<!-- Render Sections -->

Ответ 19

У меня была та же проблема. я просто конвертирую

@Styles.Render("~/Content/css")
and @Scripts.Render("~/bundles/modernizr") to 
    @Styles.Render("/Content/css")
    @Scripts.Render("/bundles/modernizr")

и его работа. просто не забывайте конвертировать

   @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
to 
    @Scripts.Render("/bundles/jquery")
    @Scripts.Render("/bundles/bootstrap")

имеют приятное время