Как правильно использовать относительные пути CSS при использовании пакета Visual Studio 2012?

У меня есть приложение MVC 3/.NET 4.0, работающее на Visual Studio 2012.

Я только что создал статический пакет для всех моих файлов JS и CSS.

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

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

Bundle css = new Bundle("~/MyCSS", typeof(CssMinify));
css.AddFile("~/Content/css/Site.min.css");   
css.AddFile("~/../CommonWeb/css/fontawesome/css/font-awesome.css");   
BundleTable.Bundles.Add(css);

Я пытаюсь включить font-awesome. Он находит файл CSS просто прекрасным, но ни один из шрифтов и значков не входит. Я предполагаю, что такие строки вызывают проблему:

src: url('../font/fontawesome-webfont.eot');  /* From Font-Awesome */

Любые мысли о том, как это исправить? Спасибо!

EDIT: дополнительная информация:

При просмотре запроса относительного пути CSS он идет после корня моего сервера:

http://localhost/font/fontawesome-webfont.woff

Вместо

http://localhost/CommonWeb/css/fontawesome/font/fontawesome-webfont.woff

Ответы

Ответ 1

CSS анализируется браузером. URL в CSS относится к расположению файла CSS. Не для страницы HTML.

Итак, просто проверьте, куда загружены ваши шрифты, и они должны работать нормально.

Ответ 2

Это произойдет в каталоге выше относительного корня веб-приложения:

css.AddFile("~/../CommonWeb/css/fontawesome/css/font-awesome.css");

Вместо этого скопируйте этот файл CSS в событие post build для проекта, который он существует, в каталог Content/css проекта MVC, используя синтаксис макроса, чтобы упростить команду COPY. Вы можете найти этот синтаксис здесь. Visual Studio также предоставляет механизм для расширения диалога и предоставления вам помощи, поскольку он показывает фактический путь.

Наконец, измените пакет, который будет использоваться:

css.AddFile("~/Content/css/font-awesome.css");

Ответ 3

Это сообщение SO имеет полезное решение этой проблемы, и, похоже, оно написано кем-то, кто действительно работает для Microsoft в коде ASP.net Bundle. (И странно, кто редактировал этот вопрос, но не публиковал ответ!)

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

У нас есть перезагрузка URL-адресов в css в списке todo, но пока что, дело в том, чтобы ваш пучок пакетов выглядел как каталог css, поэтому относительные URL-адреса просто работают, то есть:

new StyleBundle("~/Static/Css/bootstrap/bundle")

Обновление: мы добавили поддержку этого в версии 1.1beta1, поэтому автоматически переписывайте URL-адреса изображений, вы можете добавить новый ItemTransform который автоматически перезагружается.

bundles.Add(new StyleBundle("~/bundles/publiccss").Include(
            "~/Static/Css/bootstrap/bootstrap.css",
            "~/Static/Css/bootstrap/bootstrap-padding-top.css",
            "~/Static/Css/bootstrap/bootstrap-responsive.css",
            "~/Static/Css/bootstrap/docs.css", new CssRewriteUrlTransform()));

Это устранило мою проблему с получением 404 ошибок на значках шрифтов Awesome на рабочем сервере из-за неправильного использования относительных путей.

bundles.Add(new StyleBundle("~/Content/font-awesome/css/bundle").Include(
      "~/Content/font-awesome/css/font-awesome.css", new CssRewriteUrlTransform()));

Ответ 4

У меня была эта проблема с Django. Если вы хотите использовать CDN, вы не столкнетесь с этой проблемой.

Просто добавьте это

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

src: url('../font') часть будет разрешена на уровне CDN, чем ваш сервер.

Ответ 5

Я собирался немного по-другому, чем ваш, но ваше редактирование по относительному пути CSS мучительно похоже на ту же проблему. Вот как я собирался.

 bundle.Add(new StyleBundle("~/Content/css").Include("~/Content/font-awesome.css", new CssRewriteUrlTransform()));

new CssReWriteUrlTransform() преобразовывал @font-face в css src: url('../fonts/fontawesome') в src: url('/fonts/fontawesome')

Я вынул new CssReWriteUrlTransform(), и шрифты загрузились нормально.

Кроме того, убедитесь, что пути шрифтов относятся к файлу CSS. Если вы размещаете в II8, убедитесь, что вы добавили тип .woff2 и .woff MIME.