與文件位置捆綁在一起的樣式

Question

我想在我的代碼中捆綁三個CSS文件。 其中之一是我的網絡字體，我使用了“ url”。 但是當我運行應用程序時，瀏覽器找不到文件。

這是我的css文件：

@font-face {
    font-family: 'neuropol';
    src: url('../Files/Font/neuropol_x_free-webfont.eot');
    src: url('../Files/Font/neuropol_x_free-webfont.eot?#iefix') format('embedded-opentype'),
         url('../Files/Font/neuropol_x_free-webfont.woff') format('woff'),
         url('../Files/Font/neuropol_x_free-webfont.ttf') format('truetype'),
         url('../Files/Font/neuropol_x_free-webfont.svg#neuropol_x_freeregular') format('svg');
    font-weight: normal;
    font-style: normal;

}  

這是我的捆綁代碼：

bundles.Add(new StyleBundle("~/bundles/styles/base").Include("~/Content/Styles/style.css", "~/Content/Styles/normalize.css", "~/Content/Styles/webfont.css"));

有人可以幫助我解決問題嗎？

Answer 1

當CSS定義中包含src URL時，瀏覽器將檢查相對於其下載CSS文件的位置的路徑。 在這種情況下，這意味着它將在~/bundles/Files/Font/...而不是~/Content/Files/Font/...尋找src文件。

嘗試使軟件包名稱與相對位置匹配。

bundles.Add(new StyleBundle("~/Content/Styles/base-bundle.css").Include("~/Content/Styles/style.css", "~/Content/Styles/normalize.css", "~/Content/Styles/webfont.css"));

Answer 2

看看這個鏈接

基本上，您可以添加一個將CSS文件中的URL轉換為有效URL的轉換。

您可以通過將Bundles配置更改為此：

bundles.Add(
new StyleBundle("~/Content/Styles/base-bundle.css")
.Include("~/Content/Styles/style.css", new CssRewriteUrlTransform())
.Include("~/Content/Styles/normalize.css", new CssRewriteUrlTransform())
.Include("~/Content/Styles/webfont.css", new CssRewriteUrlTransform())
);

Answer 3

您可以像這樣將其更改為App_Start> BundleConfig.cs

     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"));

像這樣在頭部將其加載到布局頁面中。

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