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
Related
I was trying to segregate my CSS to specific controllers by compiling my assets and rendering them in my layouts via <%= stylesheet_link_tag "application", params[:controller] %>
I am using the Bootstrap (4.3.1) CDN and have this in my application.scss file:
#import "bootstrap-sprockets";
#import "bootstrap";
The problem is that when I do Rails.application.config.assets.precompile += %w( *.css ) it must be compiling bootstrap as it gives me this error:
Sass::SyntaxError in RecipeCategories#index
Undefined variable: "$alert-padding".
So I'm using this to "solve" it:
Rails.application.config.assets.precompile = [ Proc.new{ |path| !File.extname(path).in?('.css') }, /bootstrap.css$/ ]
I don't know if this is effective or best practice to prevent bootstrap from being precompiled.
I also run into the problem where a style defined in one controller's stylesheet is being loaded in the view of another until the page is refreshed. (I put the class on an element in multiple controller views to see if it was really isolated to a specific controller.)
Basically, the style in one controller's CSS file is able to be used in other controllers views until the page is refreshed, then the style is "removed" from the element in the controller view that doesn't have the style in it's CSS file.
You seem to mistakenly be precompiling the bootstrap assets via the gem and Rails' asset pipeline AND getting bootstrap from a CDN. You only need one or the other, so you can probably remove the gem and just use the CDN.
I have a really annoying issue where the bundler is not loading the file all.css correctly after publishing, resulting in my datepicker not being styled properly.
Here is the datepicker when debugging from Visual Studio:
And after publishing the application:
Where all.css simply contains
#import "base.css";
#import "theme.css";
#import "jquery-ui.css";
And bundleconfig.cs contains:
bundles.Add(new StyleBundle("~/Content/css")
.Include("~/Content/bootstrap.css")
.Include("~/Content/mystyles.css")
.Include("~/Content/themes/base/all.css"));
I noticed that the issue is resolved if I manually add
.Include("~/Content/themes/base/jquery-ui.css)
But this does not explain why this is happening in the first place.
Does anyone have any ideas or suggestions?
Thanks!
I have the following folders structure in my MVC site:
-- Content -- Notebook -- css
-- Content -- Notebook -- fonts
Content is directly under the root for the site. In my css folder i have a file which has a relative path
url('../fonts/fontawesome-webfont.woff?v=4.0.3')
My bundle currently looks like:
bundles.Add(new StyleBundle("~/bundles/Content/Notebook/css").Include(
"~/Content/Notebook/css/animate.css",
"~/Content/Notebook/css/font.css",
"~/Content/Notebook/css/font-awesome.min.css",
"~/Content/Notebook/css/app.css"
));
This is rendered using
#Styles.Render("~/bundles/Content/Notebook/css")
this works for the css files, but the font file isn't loading, i see that it is looking for it here http://localhost/MySite/bundles/Content/fonts/fontawesome-webfont.woff?v=4.0.3
I saw that and then tried to change my bundle name to
~/Content/Notebook/css
thinking that would get the relative path to work also, if i remove the "bundles" from the name,
but doing that causes the css files not to load. Why wouldn't the css files load? If I had the word "bundles" back to the name it works again. Also any idea on how to get the fonts to load along with the bundle?
When you do this:
url('../fonts/fontawesome-webfont.woff?v=4.0.3')
you are referring to the fonts via a relative path. If you then put your CSS bundle at /bundles/Content/Notebook/css it will look in bundles/content/fonts since that's combination of your relative path and where the browser see your css-file.
A few possible options (either):
Change your bundle path:
bundles.Add(new StyleBundle("~/Content/Notebook/css") ...
(the reason your css files didn't load when you removed bundles was that you didn't change the name of the stylebundle)
and
#Styles.Render("~/Content/Notebook/css")
Reference your fonts with an absolute path:
url('/Content/notebook/fonts/fontawesome-webfont.woff?v=4.0.3')
I'm trying to use these icons for my site. I already downloaded bootstrap, and have a bootstrap.css file. If I download all of bootstrap, it messes my site up, so I downloaded a customized version. I forgot to download the icons, so what I did was download a customized bootstrap with only the icons, and then copy and pasted that into my old bootstrap.css file. However, the icon I was trying to use didn't work.
So then what I did was I tried moving my old bootstrap.css file out of vendor/assets/stylesheets and into vendor/assets, and I put the new bootstrap.css file (with only the icons styling) into vendor/assets/stylesheets. When I did that, the icon still didn't show. So I removed the new bootstrap.css file, and I put the old one back into vender/assets/stylesheets. However... now none of the bootstrap styling works!!! I have no clue why that is!
I tried restarting my web server, clearing my cache, I checked to see if there is an assets folder in my public folder (because when there is I can't see css changes using localhost. something to do with compiling). None of it worked, and I still can't see any of the bootstrap styling in my localhost. When I use inspect element, I don't see the bootstrap styles being applied. I'm afraid to update the actual site, because I might loose the bootstrap styling. If you want me to update it so you can see it and help me and are confident that I won't lose the bootstrap styling, I'll trust you and do it. Let me know.
Error:
Sass::SyntaxError in Static_pages#home
Showing /Users/adamzerner/collegeanswerz/app/views/static_pages/home.html.erb where line #1 raised:
Invalid CSS after "...ground-position": expected ";", was ": center;"
(in /Users/adamzerner/collegeanswerz/app/assets/stylesheets/home.css.scss)
Extracted source (around line #1):
1: <%= stylesheet_link_tag "home", :media => "all" %>
2: <%= javascript_include_tag :application %>
3: <% provide(:title, 'Questions About College? CollegeANSWERZ') %>
4:
Rails.root: /Users/adamzerner/collegeanswerz
Application Trace | Framework Trace | Full Trace
app/assets/stylesheets/bootstrap.css:1939
app/assets/stylesheets/home.css.scss:1
app/views/static_pages/home.html.erb:1:in `_app_views_static_pages_home_html_erb__737002310770935096_70160250580000'
Request
Parameters:
None
Show session dump
Show env dump
Response
Headers:
None
If you are using ruby on rails, then you can use the bootstrap-sass gem.
gem 'bootstrap-sass'
and then start using it by adding
#import bootstrap;
to the css file under app/assets/stylesheets. You can have all the functions provided by bootstrap.
But if you still want the customized version, you can place the bootstrap css files under app/assets/stylesheets and javascript files under app/assets/javascripts and images under app/assets/images. You can download the missing images from bootstrap and then go to /img for the images.
EDIT:
Looking at your error logs and the css you have provided in the comment. You have forgotten the semicolon after the background-image: url("glyphicons-halflings.png");
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.