I've added bootstrap CSS files via a StyleBundle to my asp.net mvc 5 project.
(It uses as Cdn: https://www.asp.net/ajax/cdn#Bootstrap_Releases_on_the_CDN_14 )
var bootstrapCssCdnPath = "http://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css";
var bootstrapCssBundle = new StyleBundle("~/bundles/css/bootstrap", bootstrapCssCdnPath).Include("~/Content/bootstrap.css");
//bootstrapCssBundle.CdnFallbackExpression // ?
bundles.Add(bootstrapCssBundle);
var bootstrapThemeCssCdnPath = "http://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap-theme.min.css";
var bootstrapThemeCssBundle = new StyleBundle("~/bundles/css/bootstraptheme", bootstrapThemeCssCdnPath).Include("~/Content/bootstrap-theme.css");
//bootstrapCssBundle.CdnFallbackExpression // ?
bundles.Add(bootstrapThemeCssBundle);
However there is a problem: when I add an incorrect url as CDN (e.g. adding 'ahttp' instead of 'http') my custom "fallback" css file is not used, instead it shows 'ahttp://' in my html source. Same when I'm running my site on Debug or Release.
To enable bundling and minification, set the debug value to "false". You can override the Web. config setting with the EnableOptimizations property on the BundleTable class. The following code enables bundling and minification and overrides any setting in the Web.
The BundleConfig. cs file is the file that is used for doing the bundling operation in MVC4. You can get this file inside your app_start folder. The following is the default code snippet for the BundleConfig.
Both bundling and minification are the two separate techniques to reduce the load time. The bundling reduces the number of requests to the Server, while the minification reduces the size of the requested assets.
This RegisterBundles() method contains all the bundles created in the application. Notice that this method has a parameter bundle, it is of type BundleCollection class. All the bundles created are added to this bundle parameter at the start of the application. For scripts(.
1) This is a bug in the Microsoft ASP.NET Optimization Framework, documented here.
2) The solution is to modify the CdnFallbackExpression
to be a javascript function that both checks for the stylesheet and loads the fallback, thus ignoring the bad script from the Optimization Framework.
Here is solution which provides a StyleBundle
extension method to solve the problem: Style Bundle Fallback.
3) There should be unminified version like bootstrap.css
(not bootstrap.min.css
). When you build your web application for release it uses .min
version. More here: Bundler not including .min files.
4) No, you can't use multiple CSS files with CDN (each of them must have its own bundle). Here is an article that explains when to use a CDN (or not) and why: Know When To CDN.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With