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.
Related
I just committed and pushed a minor CSS tweak. On my server I git pull, npm run build, and forever restart __sapper__/build
Now there seems to be more than one version of the same CSS rule across different files, as per the below screenshot (this is after disabling browser cache):
The correct rule is the third one (vertical-align: top; margin-top: 1px;), which seems to be a combination of CSS files.
Any idea where the 'old' rules are coming from? Cached somewhere somehow?
/EDIT This is my rollup.config.js: https://gist.github.com/Bandit/bbcfd6c70ace5800765313dfe6021854
/EDIT2 The styles in question are in a /style/global.scss file, which is included using the following code in /routes/_layout.svelte:
<style lang="scss" global>
#import "./style/global.scss";
main {
background-color: white;
padding: 5rem 1rem 0 1rem;
}
</style>
Guessing this is somehow the issue? Where is the right place to 'inject' global stylesheet for colours/theme/typography etc?
/EDIT3 The styles being included via _layout.svelte are being included more than once in dev as well, here's a screenshot:
These selectors don't seem to come from a Svelte component, since they're not scoped (e.g. .split-button.svelte-a9ylb1)? Or are you using :global(.split-button) in a Svelte component?
Anyway... I failed to reproduce your issue, but my intuition is that your problem probably comes from the postcss plugin. It has an inject option that is enabled by default. What this option does is injecting a <style> tag in the <head> of your doc; the code that does this is appended to your modules' JS by the postcss plugin. This behaviour might very well clash with what svelte-preprocess or rollup-plugin-svelte is doing.
Try adding inject: false in the 3 places where you're using postcss in your Rollup config, and see if this helps.
Another possibility might be the service worker. I don't think an issue there could produce your result you get, but we never know... You should try options like "Update on reload" and "Bypass for network" (I don't know what are the equivalent options in your browser) to see if that makes a difference.
Otherwise, you may have to show more of your code. Where does this precise CSS rule come from (e.g. style tag in a Svelte component, SCSS file in node_modules, ...)? How is it imported into your project (e.g. import './app.css', #import './app.scss', etc.), and where? Also, I'm surprised that you have the postcss rollup plugin only in the server (the one that is not registered in sveltePreprocess)... What do you need this for, that you don't need on the client?
EDIT: Follow up
Wait, what? You've got some style files under your routes directory?? routes/style/global.scss?
Even with that, I don't appear to be able to reproduce your problem, but it's worth noting that Sapper will try to include every file it encounters under this directory. If you've got a plugin that lets you import *.scss files, then Sapper will actually see a global.scss.js, so it will think it's a server route. Without a plugin that can eat SCSS, it should... crash. If the plugin in question is postcss with its default inject option still to true, to me it looks like a star suspect...
Anyway, some further points of clarification...
svelte-preprocess enables lang="xxx", global attribute in <style global ...>, in .svelte files only.
rollup-plugin-postcss can additionally be added, directly in plugins array (i.e. not as an option of svelte plugin). It gives support for import './foo.scss', in .js files, as well as in the <script> part of .svelte files.
(Of course, SASS support by PostCSS, or PostCSS support by Svelte preprocess are depending on the config you feed them.)
OK. So now there are multiple places where some CSS / SCSS can enter your build. That I can think of, there are the following ways:
<link rel='stylesheet' href='global.css'> in src/template.html: this one will copied as is without processing.
I suppose you can also have such a "custom" <link> tag in the markup (~HTML) part of a .svelte file, and it would be included as is in the resulting HTML (you'd still have the responsibility that the reference CSS file be accessible at the given URL).
import 'something.css' or 'import 'something.scss'in a.jsor JS part of a.sveltefile: these will get processed by bundler & plugins, and converted to some JS code, with optionally additional assets that the JS can reference (typically, a proper CSS file is generated, and some JS code dynamically injects atag for it at runtime; another approach is to generate some JS that will inject every CSS rule in the doc). PostCSS withinject: true` uses the CSS + inject tag method.
the CSS / SCSS style that you write in the <style> part of a .svelte file will also be processed by the Svelte plugin in a similar way as described just before (preprocess option required to accept anything else than raw CSS); depending on the plugin configuration, it may also try to write a '.css' file for your application (see docs. With the emitCss option, that is apparently needed for Sapper, it should output one CSS file per component (or maybe entrypoint).
In your case, you say that you've removed rollup-plugin-postcss from your config, so the 3rd point (import css from js) should not be possible anymore.
Well... I just hope this can help you investigate further.
I've pushed a Sapper + PostCSS example on a branch on this repo. As far as I can tell, it doesn't have the issue you're describing here. So maybe you can find the problem by comparing with what you have. See this commit for the diff with the vanilla official template.
I tried to also add rollup-plugin-postcss, like you initially had in your config, in order to be able to import .scss from outside of Svelte components. But I failed to find a way to do this that don't conflict with Sapper.
EDIT 2
Oh, and just to be sure... Be sure to try a little rm -r __sapper__ && rm -r src/node_modules/#sapper (notice: node_modules under src, not the one in your project's root) before pursuing your investigation. I'm sure you've already done that, but better safe than sorry. Stale things can live in there.
I am encountering a problem when trying to push my code up to heroku. I have run:
RAILS_ENV=production bundle exec rake assets:precompile
and got this error:
Sass::SyntaxError: Invalid CSS after " color: #f19f4d;5": expected "{", was ";"
(sass):916
I understand there is syntax error somewhere in my css yet i have gone through all my files and can not find this line. Can someone please tell me if there is way to locate this line or where it could possibly be. Thank you so much!
If you are using Bootstrap, it depends on jQuery so you'll need to make sure to include it in your application stylesheet so for example in app/assets/stylesheets toward the top of the file and before any bootstrap includes or imports you'll need
//*= require jquery-ui
If that's not the problem, thaen precompilation is failing due to some kind of syntax error. First try to any occurrence of f19f4d in your code by doing a full text search of your code. If you have a *nix based system you can just try either of these from the terminal,
if you are using git version control
git grep f19f4d
Or just
grep f19f4d
If that doesn't turn up the culprit, than it must be a third party dependency. You'll need to go through any includes in your css. Check in your layout file. You should have something like
<%= stylesheet_link_tag "application" %>
So then open the file app/assets/stylesheets/application.scss
You will then need to comment out any includes and add them back one by one until you find which library is causing precompilation to fail. You will need to do this for every layout and/or stylesheet until you find which one is causing the problem.
At the top of each stylesheet you should have a list of includes like
#import 'bootstrap';
Or they may look more like this:
//*= require jquery-ui
So to comment them to not load you can just make them like this while you are testing.
// #import 'bootstrap';
// require jquery-ui
You may got other compilation errors if you have a lot of 3rd party stuff all over the place, but you have to find the bug somewhere.
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.
I've got a very weird issue with my Ember application. I have a style.css file that is (unfortunately) 4030 lines long due to circumstances I cannot change at the moment. It is included in my app/index.html file like so
<link rel="stylesheet" href="assets/style.css">
When I run ember build --prod on my ember app, I get the error: "Ember is not defined". Now here's the strange part: if I copy about 100 lines from the end of the style.css and then paste it to the beginning of the style.css file, then building to production has no problem, and the completed build runs perfectly. Of course, this practice of shuffling around the style.css cannot be continued for long, and therefore I need to find a solution - or at least the cause of this.
I'm asking if anyone has experienced this problem, and if so, what was done to fix it.
So. After researching and trial and error, I've found that the reason this was a problem was because I named my main css file 'style.css', which is a very common name for a .css file. One of my vendor packages (still don't know which one) had a .css file also called style.css, and during compilation, the vendor .css and my app's .css clashed with each other.
Changed the name to 'myCompany_style.css' and everything works fine. Also as per #kumkanillam's suggestion, moved all css compilation to app.css
Will edit answer to include issue link if I can re-find it.
In my ASP.NET MVC5 project I'm using Bundling/Minification and dotless together.
var commonCss = new StyleBundle("~/bundles/main.css").Include(
"~/CSS/global.css",
"~/CSS/header.less",
"~/CSS/footer.css"
);
commonCss.Transforms.Clear();
commonCss.Transforms.Add(new LessTransform());
commonCss.Transforms.Add(new ConfigurableStyleTransform(cssSettings));
return commonCss;
LessTransform() is from System.Web.Optimization.Less.
Intermittently I'm seeing the header.less file not being included in the bundle. Sometimes it will, sometimes it won't, without any code changes.
I've ran the LESS file through a validator and no issues found.
The only other times I've seen a file not being included in a bundle is when the file cannot be found, or theres a syntax issue. However this doesn't seem applicable for this instance.
What possible reasons are there for this file not being included in the bundle?
You might be hitting this bug in dotless. If that's the case, until it gets fixed, you can get around it by specifying disableParameters="true" in the dotless section of your Web.config.