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).
我创建了MVC应用程序。当我使用发布选项在Azure上发布应用程序时，所有css和js文件都加载到页面中的单个包中。 （打开视图页面源然后显示css的单个链接）。
When I publish a site with Debug option in publish profile then all CSS load individual.
当我在发布配置文件中发布带有Debug选项的站点时，所有CSS都会加载个人。
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.
我的问题是发布选项主题的发布网站无法正确加载，但正确加载调试选项主题。我想仅使用Release选项发布我的应用程序。如果有人在此之前遇到此问题并获得任何解决方案，那么请帮助我。
1 个解决方案
#1
25
I have experienced this before when using bundling.
我在使用捆绑之前经历过这种情况。
Say for instance your css file is located at: /Content/css/css.css
比如你的css文件位于：/Content/css/css.css
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文件通过url（'../ images / image1.png'）引用另一个文件，或者例如/Content/images/image1.png中的图像。
You then set up your css bundle @ /bundles/css.
然后设置你的css包@ / bundles / css。
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.
在调试模式下，一切都很好看。但是，当您在web.config中设置
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.
发生这种情况是因为当调试模式关闭时，所有文件都会像生产中那样捆绑和缩小。在这种情况下，CSS文件将捆绑并从URL / bundles / css提供。这会导致相对URL引用中断。曾经引用/Content/images/image1.png的地方，它现在引用/images/image1.png。
You have a few options to solve this:
你有几个选择来解决这个问题：
- Serve your bundled css files from the same folder as the actual css files. eg.
/Content/css/cssbundle. This can become very tedious quickly. - 从与实际css文件相同的文件夹中提供捆绑的css文件。例如。 /内容/ CSS / cssbundle。这可能会很快变得非常乏味。
- Change all relative references in your css files to absolute references. eg.
../images/image1.pngwould 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. - 将css文件中的所有相对引用更改为绝对引用。例如。 ../images/image1.png将成为/Content/images/image1.png。这确实意味着您不能使用大量开箱即用的第三方CSS，如果要捆绑它们，则必须检查/更改相对引用。
- Use the BundleTransformer nuget package. It automatically transforms relative urls to absolute ones during the bundling process.
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.
StyleTransformer和ScriptTransformer类与标准实现的主要区别：从目录添加资产时排除不必要资产的能力，不会产生重新缩小预先缩小的资产，支持CSS代码中相对路径自动转换为绝对路径（通过使用UrlRewritingCssPostProcessor）等
#1
25
I have experienced this before when using bundling.
我在使用捆绑之前经历过这种情况。
Say for instance your css file is located at: /Content/css/css.css
比如你的css文件位于：/Content/css/css.css
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文件通过url（'../ images / image1.png'）引用另一个文件，或者例如/Content/images/image1.png中的图像。
You then set up your css bundle @ /bundles/css.
然后设置你的css包@ / bundles / css。
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.
在调试模式下，一切都很好看。但是，当您在web.config中设置
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.
发生这种情况是因为当调试模式关闭时，所有文件都会像生产中那样捆绑和缩小。在这种情况下，CSS文件将捆绑并从URL / bundles / css提供。这会导致相对URL引用中断。曾经引用/Content/images/image1.png的地方，它现在引用/images/image1.png。
You have a few options to solve this:
你有几个选择来解决这个问题：
- Serve your bundled css files from the same folder as the actual css files. eg.
/Content/css/cssbundle. This can become very tedious quickly. - 从与实际css文件相同的文件夹中提供捆绑的css文件。例如。 /内容/ CSS / cssbundle。这可能会很快变得非常乏味。
- Change all relative references in your css files to absolute references. eg.
../images/image1.pngwould 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. - 将css文件中的所有相对引用更改为绝对引用。例如。 ../images/image1.png将成为/Content/images/image1.png。这确实意味着您不能使用大量开箱即用的第三方CSS，如果要捆绑它们，则必须检查/更改相对引用。
- Use the BundleTransformer nuget package. It automatically transforms relative urls to absolute ones during the bundling process.
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.
StyleTransformer和ScriptTransformer类与标准实现的主要区别：从目录添加资产时排除不必要资产的能力，不会产生重新缩小预先缩小的资产，支持CSS代码中相对路径自动转换为绝对路径（通过使用UrlRewritingCssPostProcessor）等