使用release选项发布时，mvc中的单个文件中的CSS / JS包

Question

我创建了MVC应用程序。当我使用发布选项在Azure上发布应用程序时，所有css和js文件都加载到页面中的单个包中。 （打开视图页面源然后显示css的单个链接。）

当我在发布配置文件中发布带有Debug选项的站点时，所有CSS都会加载个人。

我的问题是发布网站的发布选项主题无法正确加载，但正确加载调试选项主题。我想仅使用Release选项发布我的应用程序。如果有人在此之前遇到此问题并获得任何解决方案，那么请帮助我。

Answer 1

我在使用捆绑之前经历过这种情况。

比如说你的css文件位于：/Content/css/css.css

此css文件然后通过/Content/images/image1.png引用另一个文件，或者url('../images/image1.png')处的图像。

然后设置你的css包@ /bundles/css。

所有在调试模式下看起来都很棒。但是，当您在web.config中设置<compilation debug="false" ....时，css文件中的引用会突然中断。如果您在Firebug / Chrome开发工具中打开控制台并检查网络标签，则会从错误的网址中看到无法加载的资源。

这是因为当调试模式关闭时，所有文件都会像生产中那样捆绑和缩小。在这种情况下，CSS文件将被捆绑并从URL /bundles/css提供。这会导致相对URL引用中断。曾经引用/Content/images/image1.png的地方，它现在引用了/images/image1.png。

你有几个选择来解决这个问题：

1. 从与实际css文件相同的文件夹中提供捆绑的css文件。例如。 /Content/css/cssbundle。这很快就会变得很乏味。
2. 将css文件中的所有相对引用更改为绝对引用。例如。 ../images/image1.png将成为/Content/images/image1.png。这意味着您无法使用大量现成的第三方CSS，如果您想捆绑它们，则必须检查/更改相关引用。
3. 使用BundleTransformer nuget包。它会在捆绑过程中自动将相对URL转换为绝对URL。

     

   StyleTransformer和ScriptTransformer类与标准实现的主要区别：从目录添加资源时排除不必要资产的能力，不会产生重新缩小预先缩小的资产，支持相对路径的自动转换绝对的CSS代码（通过使用UrlRewritingCssPostProcessor）等

     我个人推荐3，因为它是最容易维持的长期。