I'm using Visual Studio 2015 and I just installed Bundler & Minifier extension to minimize HTML, JS and CSS code.
When I ran my project I get a lot of errors.. here I'm showing some of them.
This is en example of my code:
#import url('https://fonts.googleapis.com/css?family=Roboto:300');
#charset "UTF-8";
This are the errors:
#import not allowed here.
#charset not allowed here.
(Bundler & Minifier) Expected expression, found '}'
Do you have any idea to solve this issue?
This answer helped me a lot.
Minification failed. Returning unminified contents
#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 resolve.
Ok. So this is my first lLaravel project. And I got into an odd issue. I am trying to customize the authentication forms by using bootstrap and my own added SASS files (which then are converted into the main app.css). So here is what is the issue: in the app.scss file I have imported the SASS partials and other external resources:
// Fonts
#import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
// Variables
#import "variables";
// Bootstrap
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
// ADDED Login
#import "login";
In this form, when the app.scss file is translated into the app.css, I receive an error "File to import not found or unreadable: node_modules/bootstrap-sass/assets/stylesheets/bootstrap.
on line 6 of resources/assets/sass/app.scss". Anyone has any idea on how to fix this, suggestions on how to manage my css and sass files? Thank you in advance for your time.
I found a quick fix, but I am not sure that it is the best one. I downloaded a bootstrap.min.css and added it in public/css/ . Then, in the app.scss I imported the bootstrap file "#import "bootstrap.min.css";". That turned out to be a fix so far.
Simply just add a ~ to beginning of the imported directory
#import "~node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
it should be like above.
I have some problems with SASS in ionic,
Whats the problem?
The problem is that custom stylesheet's doesn't work how it should.
I have sass folder with ionic.app.scss file and _test.scss file with some code.
I imported _test.css in ionic.app.scss file like this:
#import "../scss/test";
And when I edit and save ionic.app.scss, it's works perfectly, compiled in min.css and working in my browser, but when I edit and save my _test.scss file, nothing happening. _test.scss file only works, when I compile my ionic.app.scss file.
Can someone help me with that? What I miss??
Without seeing your folder structure, It's a shot in the dark but i think your _test.scss file isnt being watched.
Try moving it to be in the same directory as the other files and change your import to be.
#import "{folderName}/test";
Just make sure its within the scss folder with the other files
First of all I'm assuming you are using Ionic 1.x.x in my answer. You have a couple of places where you should check.
First is the ionic.project file:
"watchPatterns": [
"www/**/*",
"!www/lib/**/*"
]
Make sure you have your directory inside the watchPatterns. This most probably is correct since it's the Ionic default. You however mentioned sass folder in your question so I can't be sure. This is why I'm suggesting all the custom folder stuff below. Although you also mentioned that ionic.app.scss is located in the same folder so the folder probably is the default ionic folder if you have not changed the name of the folder.
Secondly in your gulpfile.js you have the following:
sass: [
'./scss/**/*.scss',
'./www/customfolder/**/*.scss'
],
Make sure your css file is included in these paths. The second one is a possibility when a custom folder is used. Just set the path correctly. This will then use the default ionic gulp task sass and watcher watch.
After this you should be able to include your custom SASS stylesheet in the scss/ionic.app.scss file (not in www folder) with the following:
#import "www/customdirectory/style"; // If custom directory
/* IN YOUR CASE */
#import "style";
If the _style.scss file is in the same directory as the ionic.app.scss then you do not need to set the path, just the name of the file is enough.
Hopefully this can be helpful to you when trying to solve your problem.
In an Asp.Net MVC 5 application, I am creating a style bundle in my egisterBundles method. I'm using jquery-ui. Instead of listing all of the jquery-ui css files individually I'm using all.css, which imports all the rest. The code looks like this:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/a.css",
"~/Content/b.css",
"~/Content/themes/base/all.css"));
And all.css contains two lines:
#import "base.css";
#import "theme.css";
This works, but only when I set
BundleTable.EnableOptimizations = false.
When I set
BundleTable.EnableOptimizations = true
then none of the jquery css loads.
Of course there is an easy workaround; I can individually add the jquery-ui css files to the bundle. But I am curious: why does all.css break when the css files are bundled and minified? This does not appear to be browser-specific, as I have the same problem in both IE9 and Chrome 39.
According to this answer the default minifier simply does not support the #import directive:
MVC4 bundling CSS failed Unexpected token, found '#import'
Also, the jquery-ui css files contain relative paths to images, so the virtual path of the bundle must allow the browser to find the relative path to the images, for example:
bundles.Add(new StyleBundle("~/Content/themes/base/jqueryui")
.Include("~/Content/themes/base/core.css" [and other desired css files]));
And on the cshtml page:
#Styles.Render("~/Content/themes/base/jqueryui")
See this link for explication: MVC4 StyleBundle not resolving images
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.