使用发布选项发布时，mvc 中单个文件中的 CSS/JS 包 [英] CSS/JS bundle in single file in mvc when publish with release option

问题描述

我已经创建了 MVC 应用程序.当我使用发布选项在 Azure 上发布应用程序时，所有 css 和 js 文件都加载到页面中的单个包中.(打开查看页面源代码，然后显示 css 的单个链接).

I have created MVC application. When I publish the application on Azure with release option, all css and js file load in a single bundle in page. (Open view source of page then displays a single link for css).

当我在发布配置文件中使用调试选项发布站点时，所有 CSS 都会单独加载.

When I publish a site with Debug option in publish profile then all CSS load individual.

我的问题是当发布站点的发布选项主题未正确加载，但调试选项主题加载正确时.我只想使用发布选项发布我的应用程序.如果有人之前遇到过这个问题并得到任何解决方案，请帮助我.

My problem is when publish site with release option theme not load correctly, but with debug option theme loads correctly. I want to publish my application with Release option only. If anyone face this issue before and get any solution then please help me.

推荐答案

我之前在使用捆绑时遇到过这种情况.

I have experienced this before when using bundling.

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

Say for instance your css file is located at: /Content/css/css.css

这个 css 文件然后通过 url('../images/image1.png').

This css file then makes a reference to another file, or for example an image at /Content/images/image1.png via url('../images/image1.png').

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

You then set up your css bundle @ /bundles/css.

在调试模式下一切都很好.但是，当您在 web.config 中设置 <compilation debug="false" .... 时，css 文件中的引用突然中断.如果您在 Firebug/Chrome 开发工具中打开您的控制台并检查网络选项卡，您会看到资源无法加载，来自错误的 URL.

All appears great in debug mode. However, when you set <compilation debug="false" .... in your web.config, suddenly the references made in the css file breaks. If you open your console in Firebug/Chrome dev tools and check the network tabs, you'll see resources failing to load, from an incorrect URL.

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

This happens because when debug mode is off, all the files are bundled and minified like they would be in production. In this case, the CSS file would be bundled and served from the URL /bundles/css. This results in the relative URL reference breaking. Where it once referenced /Content/images/image1.png, it now references /images/image1.png.

您有几个选项可以解决这个问题:

You have a few options to solve this:

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

1. Serve your bundled css files from the same folder as the actual css files. eg. /Content/css/cssbundle. This can become very tedious quickly.
2. Change all relative references in your css files to absolute references. eg. ../images/image1.png would become /Content/images/image1.png. This does mean you can't use a lot third party CSS bundled out of the box, you would have to check/change relative references if you wanted to bundle them.
3. Use the BundleTransformer nuget package. It automatically transforms relative urls to absolute ones during the bundling process.

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

The main differences of StyleTransformer and ScriptTransformer classes from a standard implementations: ability to exclude unnecessary assets when adding assets from a directory, does not produce the re-minification of pre-minified assets, support automatic transformation of relative paths to absolute in CSS-code (by using UrlRewritingCssPostProcessor), etc.

我个人推荐 3，因为它最容易长期保持.

I personally recommend 3 as it is the easiest to maintain long term.

这篇关于使用发布选项发布时，mvc 中单个文件中的 CSS/JS 包的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！