css - 在 VS 中发布网站时 @import "theme.css"不起作用

Question

我有一个网站，它依赖于 jquery ui theme.css 的一些 css 样式。

当我在本地运行我的元素时，这工作正常，但是当我发布和部署时，这些特定的样式不会被选择。

当我检查对话框关闭按钮时，例如，在本地，它显示标准的十字图像，但在发布的网站上，它显示“关闭”并且没有 theme.css 的样式

我已经检查过，theme.css 包含在正常位置的目录结构中。

当我查看最小化的 css 文件时，它开始 @import"base.css";@import"theme.css";它来自 Content/themes/base/all.css，但显然它没有读取这些。

我需要做些什么才能将这些内容正确地包含在已发布的网站上吗？

谢谢

编辑:显然我可以在我的包中单独引用所有 jqueryui css 文件，但使用 @include 指令会很有用。

Answer 1

这是我的故事...

有一些问题。第一个也是最简单的是，我需要的图像位于文件系统中(并且在 Debug模式下运行时可以访问)，但元素中不存在，因此未部署它。这是如何执行此操作的一个很好的解释:How do I add an existing directory tree to a project in Visual Studio?

我的主要问题与捆绑有关(我从来没有太注意过)

问题是捆绑不会在 Debug模式下发生(即当您在本地运行时)

当您部署发布版本时，确实会发生捆绑。

因此，您的应用程序运行良好，直到您部署它。

如果您想强制调试版本执行捆绑，以便在部署之前发现这些问题(我将从现在开始执行此操作)，请在您的 RegisterBundles 中添加此行

public static void RegisterBundles(BundleCollection bundles)
    BundleTable.EnableOptimizations = true; 

相反，如果您已不再尝试修复它，而只想查看 Shiny 的 Web 应用程序正常运行，请在部署之前添加此行:

BundleTable.EnableOptimizations = false; 

这将完全禁用捆绑并使您部署的应用程序像调试应用程序一样工作。请记住，捆绑是为了提高性能，因此您可能会受到性能影响。

无论如何............

我阅读了很多有关捆绑的内容，但找不到有关 ScriptBundle 参数含义的具体信息，尤其是第一个参数。

过了一段时间我发现:

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js"));

意思是:

获取文件

• ~/Scripts/bootstrap.js
• ~/Scripts/respond.js

并将它们捆绑起来(缩小并压缩为单个 GET)，然后将它们放入实际的 Web 文件夹中 ~/bundles/bootstrap

因此，~/bundles/bootstrap 不仅是您用来识别 bundle 的 key (在对 bundle 的调用中以及在您的 View 中)，它也是Web 服务器上存储和调用包的物理路径

不知道这个东西的用途，我接到了这样的电话:

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css",
                  "~/Content/themes/base/all.css",
                  "~/Content/select2.css"
                  ));

问题是:~/Content/css 是一个已经存在的实际物理文件夹，因此捆绑在某种程度上令人困惑。将第一个参数更改为不同的路径修复了它。

所以...如果您遇到此问题，请执行两件事:

• 确保所有 StyleBundle 键(StyleBundle 调用中的第一个字符串)均以 ~/bundles (或适当的唯一名称)开头，只是为了确保它们不可能引用真实文件夹

• 我还确保我引用的文件都不是 .min 文件。不确定这会产生什么影响，但我在另一个 stackexchange 答案中找到了它，所以我还是这么做了。

我现在的问题是我只需要在 bundle 中以正确的顺序包含正确的样式表。

如果您捆绑了所有内容或错过了 css 文件，甚至将它们放在错误的顺序中，则捆绑的 css 将不会像调试 css 一样应用，并且您的页面将出现畸形变形怪物

例如，我需要将 site.css 放在 bootstrap.css 之后，以便我的自定义网站样式能够覆盖通用的 bootstrap 样式。我还需要使用 .IncludeFolder 来包含 jqueryui css 文件夹的全部内容

..我仍然有一个问题，jqueryui 样式引用子文件夹中的图像。 (所以仍然存在相对路径不正确的问题)