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.
Why is my fallback not being used?
What is the CdnFallbackExpression for a StyleBundle? (and in particular for a bootstrap.css and bootstrap-theme.css)
Should the .Include be the .min.css file or does it automatically search for the .min. version first?
Is there a way to .Include multiple css files, using a Cdn with fallback, so that I don't have to create a new StyleBundle everytime per css file that uses a Cdn?
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.
I'm currently learning ASP.NET 4.5 of the MVC flavour, and I've decided to remove bootstrap completely and go with PureCSS (http://www.purecss.io).
This is largely due to the fact that my web application requires almost no scripting other than on the code-behind, and some light JS for data validation and the like.
Currently I'm linking to the combined PureCSS style sheet from the Yahoo! CDN:
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
in my _Layout.cshtml file. This is obviously functional, however I have 2 concerns:
If the CVN (for whatever reason) fails/goes down/changes, all of the styling disappears and I'll have to solve that on the fly (or implement some time of failsafe switchover to another CDN)
I really like the concept of bundling and I'd like to have the local PureCSS library bundled, to prevent the aforementioned problem as well as for the sake of modularization/compartmentalization.
Is generating this bundle a simple matter of:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/purecss_release_1_6/some.css",
"~/Content/purecss_release_1_6/other.css",
"~/Content/purecss_release_1_6/neat.css",
"~/Content/purecss_release_1_6/etc.css",
...
"~/Content/site.css"));
If so, that's fine and dandy, but there are DOZENS of css files in the release. Is there a cleaner way to bundle them?
Thank you!
You can use IncludeDirectory to reference the whole directory containing all your CSS files.
Example specific to your case:
bundles.Add(new StyleBundle("~/Content/css")
.IncludeDirectory("~/Content/purcss_release", "*.css"));
New in .NET 4.5 is an integrated system for falling back from a failed CDN to local material. Tutorial/information: http://www.hanselman.com/blog/CDNsFailButYourScriptsDontHaveToFallbackFromCDNToLocalJQuery.aspx
Usable information from the link above:
The basic idea for CDN fallback is to check for a type or variable
that should be present after a script load, and if it's not there, try
getting that script locally. Note the important escape characters
within the document.write. Here's jQuery:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js"></script>
<script>
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/js/jquery-2.0.0.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
I have made my first website using MVC 5 which works fine on my local machine but when I publish it to the server some of the CSS is not minifying correctly.
/* Minification failed. Returning unminified contents.
(80,1): run-time error CSS1019: Unexpected token, found '#import'
(80,9): run-time error CSS1019: Unexpected token, found 'url('../Content/dark-skin/skin.css')'
(671,16): run-time error CSS1062: Expected semicolon or closing curly-brace, found ':'
(1288,16): run-time error CSS1062: Expected semicolon or closing curly-brace, found ':'
(1680,1): run-time error CSS1019: Unexpected token, found '#keyframes'
(1682,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '50%'
(1685,1): run-time error CSS1019: Unexpected token, found '#-webkit-keyframes'
(1687,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '50%'
*/
/* NUGET: BEGIN LICENSE TEXT
*
* Microsoft grants you the right to use these script files for the sole
* purpose of either: (i) interacting through your browser with the Microsoft
* website or online service, subject to the applicable licensing or use
* terms; or (ii) using the files as included with a Microsoft product subject
* to that product's license terms. Microsoft reserves all other rights to the
* files not expressly granted by Microsoft, whether by implication, estoppel
* or otherwise. The notices and licenses below are for informational purposes only.
*
* NUGET: END LICENSE TEXT */
/*!
* Bootstrap v3.0.0
*
* Copyright 2013 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world by #mdo and #fat.
*//*! normalize.css v2.1.0 | MIT License | git.io/normalize */
After trying to correct some of the errors and publishing again the error looks the same.
The strangest part is with bootstrap.css which I have slightly modified for the purpose of the website. When I publish it the changes are not in the bundle file. Is it possible that bootstrap is loaded from Bootstrap server and not my project?
bundles.Add(new StyleBundle("~/Content/cssmain").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/ilightbox.css",
"~/Content/bannerscollection_zoominout.css"));
I have also tried to do minification myself using web application but my changes are not visible and the files do not appear to be minified.
Any help is appreciated.
I resolved the problem bundling bootstrap.css by doing 2 things:
Include the bootstrap.css first in the bundle. The code sample in the question already does this, but I was not.
Add the official minified version (bootstrap.min.css) to the project in the same directory as the unminified version. This prompts the bundler to use the existing minified file instead of trying (and failing) to minify bootstrap.css itself. See the green arrow in the screenshot below.
Note that if you are using a specific theme, substitute bootstrap.css and bootstrap.min.css with the files provided by the theme. Here's the working code from my project that uses the spacelab theme:
bundles.Add(new StyleBundle(GetStyleBundlePath("bootstrap")).Include(
"~/Content/3rdParty/bootstrap.spacelab.css",
"~/Content/3rdParty/bootstrap-datepicker.css",
"~/Content/3rdParty/bootstrap-multiselect.css"));
For those that may stumble on this post... You can also resolve this by moving the #import to the first bundled item.
According to: http://webdesign.about.com/cs/css/qt/tipcssatimport.htm
#Import must always be first in the CSS document. When you bundle multipule CSS files together, it chains them into a single bundled css file. Since the second css file added to my bundle, in bundle config, contained an #Import at the start, as the files were chained together the #import appeared towards the middle of the newly merged document. Once I changed the bundle order the issue was resolved.
This is important to understand because although you can use the minified files provided by plugins like bootstrap any changes made to the non-minified files during development will not be added to the existing minified css file. Meaning you will have to make the changes twice, and navigate your way through the minified file.
Make sure the none of those .js files you are bundling end with //Some Comment. If a file ending with a double backslash // comment is tacked on to another dependent file it will be seen as one long comment causing the error you are seeing. I bet there is an //#Import at the end of one of your .js files. If that's the case I think you can probally safely change that line to /*#Import */
Also, I don't know if this was fixed in MVC5 but in MVC4 the minification parser doesn't handle the non-standard :-moz-any() and :-webkit-any() css tags.
Also look at this post that details how to resolve Less #import directories.
We experienced the same issue and it turns out that bootstrap.css is the problem. We were getting the same exact minification errors that you wrote above. The bundler is having problems with #import, #keyframes and #-webkit-keyframes that are in the css file.
What we did to solve the problem is to remove bootstrap.css from the bundle and just reference it directly (or the minified version, if you have it) in the Shared/_Layout.cshtml.
#Styles.Render("~/Content/bootstrap.min.css")
#Styles.Render("~/Content/css")
Minification Problem Solution:
I know Two types of possible that cause optimization problem :
The invalid CSS files that should be validated before bundling. here is W3C CSS validation service to meet this purpose.
Also considering that Microsoft Optimizer reads content of target resources for minification process, so by using some special phrases like # sourceMappingURL=jquery.min.map in a JavaScript file or #charset "UTF-8"; in a styleSheet file, the Minification will be failed again. So try to remove or comment them.
Note that by default, Bundling process can't build relative path of image resources in css or js files.
Relative Image Path Solution:
You can use the same path as bundling path like:
bundles.Add(new StyleBundle("~/Content/css/jquery-ui/bundle")
.Include("~/Content/css/jquery-ui/*.css"));
Where you define the bundle on the same path as the source files that made up the bundle, the relative path of image resources will still work( i.e. /bundle can be any name you like).
Or using new CssRewriteUrlTransform() as second parameter like:
bundles.Add(new StyleBundle("~/Content/css/bundle")
.Include("~/Content/css/*.css", new CssRewriteUrlTransform()));
Encountered this too. I had Bootstrap in the bundle-list among with the main CSS file, in which I imported bootstrap.min.css again. So Bootstrap got requested twice. Removing the import line in my main CSS file solved this for me.
#import don't work with bundle minification.
Do this... in the file BundleConfig.cs set:
bundles.UseCdn = true;
bundles.Add(new StyleBundle("~/skin", "../Content/dark-skin/skin.css"));
And set this in layout:
#Styles.Render("~/skin")
But only application relative URLs (~/url) are allowed.
What I did was, in my BundleConfig.vb (cs), I put all the files I referenced by #import within the css files like this:
bundles.Add(New StyleBundle("~/bundle/css-account") _
.Include("~/Content/consola/bootstrap/css/bootstrap.css",
"~/Content/consola/plugins/node-waves/waves.css",
"~/Content/consola/plugins/animate-css/animate.css", //Referenced by #import
"~/Content/consola/plugins/bootstrap-select/css/bootstrap-select.css",
"~/Content/account/account.css",
"~/fonts/awesome/css/font-awesome.css",//Referenced by #import
"~/Content/consola/materialize.css", //Referenced by #import
"~/Content/consola/style.css"))
That eliminated almost all the errors.
The next thing I did was modify my css files changing css pseudo-classes syntax from this [type="checkbox"]:not(.filled-in, .gm-menu-hamburger) + label:after { to this one [type="checkbox"]:not(.filled-in) + label:after,
[type="checkbox"]:not(.gm-menu-hamburger) + label:after {
That solved all errors I had.
Hope that helps
The issue for me was I had #import in a .css file.
I moved my code into a corresponding .less file that gets compiled on build, which resolved the build error for me. Compiled with Gulp.
Not sure about other, but changes I made in Bundle.config file did not get picked up until I rebuild the project.
I guess, compiler includes the information into the compiled DLL, and no longer looks at Bundle.config.
I am using ASP.NET forms application though, not sure about MVC.
Check if you have any minified (...min.js) files in your bundle.
bundles.Add( ... minified files???
));
Remove them from the bundle and render in the _layout.cshtml file:
#Styles.Render("~/Content/fontawesome-free-5.10.1-web/css/all.min.css")
Or add the non minified version of your css to the bundle.
My solution was the same as #GraehamF, I was having issues where the #imports were trying to load the css, when you inspect with dev tools the bundle css's if you see something like "run-time error", it means the file is not loaded correctly.
Before to deploy remove the debug="true" on your web.config then try to run the code on your local box, that should give you the idea of which files are not getting loaded and causing the bundle did not work.
I am trying to minify the font awesome.css but when i minimize it shows the different junk characters for content like :
{ content: "\f048"; }
above are content icons like up arrow etc....
What are the option to overcome this problem?
Thanks
Maybe I'm mis-understanding what you're asking, but those aren't junk characters. Those are the Unicode code points that Font Awesome uses (specifically the Private Use Area). They absolutely should be in your minified CSS. Or you can use the minified CSS that comes with Font Awesome.
I've run into this before. When you minify you need to specify a charset.
In your project's config set the xml's encoding to:
<?xml version="1.0" encoding="utf-8"?>
If you're uncomfortable messing with the config or don't have access you can modify the CSS.
#charset "UTF-8";
In both cases it must be the first line of the file. If you are concatenating it needs to be only in the first file.
I solved it using YUI Bundle Transformer
Installed it via NuGet Packages
Code looks like this:
var cssBundle = (new StyleBundle("~/bundles/css").Include(
"~/Content/css/font-awesome.css");
cssBundle.Transforms.Add(new CssTransformer(new YuiCssMinifier()));
bundles.Add(cssBundle);
Try to register via CssRewriteUrlTransform.
For example:
bundles
.Add(new StyleBundle("~/Content/utilities")
.Include("~/Content/font-awesome.min.css", new CssRewriteUrlTransform()));
I'm beginning to use .NET 4.5's built in minification and bundling to minify & bundle my CSS and JavaScript. JavaScript minification works great, however, I have run into trouble with CSS minification. I create a style bundle using the below code -
var myCss = new string[]
{
"~/Content/jquery.css",
"~/Content/app.css",
};
bundles.Add(new StyleBundle("~/bundles/MySiteCss/").Include(myCss ));
and then I reference them in .cshtml (razor file) as below -
#Styles.Render("~/bundles/MySiteCss/")
It minifies the CSS file. However, if the CSS files contain styles that have background-image references, such as background-image: url('img/icon.png'), it attempts the load this icon file from a new location (derived from the bundle name) = /bundles/MySiteCss/img/icon.png
Since the icon does not exist in the location, it doesn't get loaded and displayed on the page.
You need to have your bundles and CSS served from the same place for this to work easily. For example, change your bundle line to be:
bundles.Add(new StyleBundle("~/Content/MySiteCss/").Include(myCss));
And update your reference as well:
#Styles.Render("~/Content/MySiteCss/")
This has been fixed in version 1.1.0-alpha1 of the Microsoft ASP.NET Web Optimization Framework.
You can get the update via NuGet (https://nuget.org/packages/Microsoft.AspNet.Web.Optimization) if you include Prerelease.