我有一个使用 jquery datepicker 的网站(在常规 VS2012 MVC4 模板中实现)。在本地主机上运行时,它看起来和工作正常。但是当我发布(到Azure)时,一些CSS丢失了。 Chrome 开发工具在两个 css 文件上显示 404 错误:
http://cyclelog.azurewebsites.net/Content/jquery.ui.base.css http://cyclelog.azurewebsites.net/Content/jquery.ui.theme.css
我注意到我的源树中没有这样的文件 - 这两个文件位于 ~/Content/themes/base 下(而不是直接位于 Content/下)。我不知道该怎么做,因为就像我说的那样,CSS 在本地主机上运行良好。
我没有修改默认模板中创建的捆绑配置。或者更确切地说,我这样做了,但只是为了解决问题——但没有成功。我在bundle初始化中恢复了原始代码:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/site.css",
"~/Content/themes/base/jquery.ui.all.css"));
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"));
有什么想法吗?
最佳答案
问题在于您的第一个包中包含 "~/Content/themes/base/jquery.ui.all.css"
。将该文件移动到第二个包中,它将起作用。
它在本地工作,因为在本地,不会发生捆绑(假设您处于 Debug模式)。该文件中的 @import 有效,因为它正在查找正确的目录 ("/Content/themes/base/"
),因为链接呈现为:
<link href="/Content/themes/base/jquery.ui.all.css" rel="stylesheet"/>
当您部署此文件时,该文件将被捆绑到 ~/Content/css
中。样式表已捆绑,现在呈现为:
<link href="/Content/css?v=IqLBj6MTQkC-CU1" rel="stylesheet"/>
现在两个 @import 语句失败,因为该目录中不存在这两个文件。
但是,它们确实存在于 "~/Content/themes/base/"
中,这就是为什么当所有内容都以 Release模式捆绑时,它将在第二个 bundle 中工作。
更多阅读有关如何在本地复制此问题的信息:Scripts.Render using outdated javascript file
关于css - 捆绑的 jquery css、VS2012 发布到 Azure 时出现 404 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14595405/