I have build MVC 5 application which works fine when running via VS. When I publish it to the server first time it also works. Now I have made few correction to my css file and publish whole project again but website still see the old css file. I have removed all files from the server and tried few more times but it is still the same. When I check the css file on the server, the changes are inside the file.
I think it is related to MVC bundling as when I check the source it says that is accessing different file which is not even located on the server:
<link href="/Content/cssmain?v=Ikj7NnMg3q9kTHR7ynWOJDQFGMZl3mtVMi_2EkOJxc41" rel="stylesheet"/>
How can I force VS to minificate my css file again?
I've tried cleaning, rebuilding but no luck
Edit:
My bundle set up look like below and all files are located on the server in Content folder.
bundles.Add(new StyleBundle("~/Content/cssmain").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/ilightbox.css",
"~/Content/bannerscollection_zoominout.css"));
Many thanks
I think it is related to MVC bundling as when I check the source it says that is accessing different file which is not even located on the server:
CDN location? External Css lib (yours or 3rd party)? unsure what you meant by "not located on server"?
Yup, it does (look like ASP.net Bundling in action) - check your Global.asax, App_Start/BundleConfig or _AppStart and see if the bundle configuration setup point to/reference the "correct" locations for your css (and or script).
Is it just you experiencing getting the old css file loaded? Or anyone who views the site?
Related
I add a style sheet file to my project for customized style sheets. this file is in this path: ~/Content/MyStyle.css
When I run my project this file exists in the browser but there isn't any code in it.
Even I append my codes to Site.css file, those codes are wrote by mvc as default are exist, but those codes I added is not exist.
I'm confused. I wrote some code but not appear in browser.
Can you help me?
thanks
This is most likely a caching issue. You have to hard-refresh your browser. Try pressing ctrl+shift+R or ctrl+F5.
This will make sure that your modified files are requested from the server.
You can also change caching settings for your local development environment. Refer to MSDN on how to make a web.debug.config config transformation and what settings to change.
I developed a website, which can be used by different customers. As a result, we want to give different CSS styles and images to individual customers.
What we want is to manage CSS and images separately, so we won't need to deploy the site again just because we added some new CSS or images. As the site is under MVC, when accessing URLs such as:
www.mysite.com/customerA/myPage
www.mysite.com/customerB/myPage
we can find the customer id and find the right CSS and image to return.
The problem is that we want to bundle CSS, when the CSS or images are bundled, two issues will occur:
How the bundle detect underlying CSS file change? Is it possible?
Some users may already visited the URL and cached the bundled CSS, how can we disable the cached CSS, so it will get the new version?
The .NET bundling strategy is very intelligent in solving both of your issues. Once you create a bundle - example below:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
And render this bundle out on your website, the output looks something like this:
<link href="/Content/css?v=xUfHQEnjwMk9UEexrvHPdvPxJduGrgz0bbI5qy5BGHY1" rel="stylesheet"/>
Notice the ?v=bigTextstring. Anytime a file in your bundle changes, the bundling framework will change the bigTextString after the ?v=. So, for your first question, yes, it will automatically detect file changes. You can get more information about how all of that process works if you visit this SO question. For your second question, the ?v= parameter, when changed, signals the client's browser that this is a different file than you had, you need to download it again.
Tommy has a great answer. I just wanted to elaborate on a few points.
First, as long as the bundle itself hasn't changed (added/removed scripts/styles or changed the location of those files), then you can freely update the files themselves without republishing the whole site. The bundler runs at runtime and looks at the last modified timestamp of the included files. If any of the files has changed, a new bundle will be generated with an updated cache-busting querystring param.
However, since the actual bundle configuration is code-based, if you add/remove items from the bundle or change the location of the file(s), such that you have to update the bundle configuration in BundleConfig.cs then you must republish, or at least also update the project DLL. This is because the code compiled within that DLL has changed.
I have created MVC application. When I publish the application on Azure with release option, all css and js file load in a single bundle in page. (Open view source of page then displays a single link for css).
When I publish a site with Debug option in publish profile then all CSS load individual.
My problem is when publish site with release option theme not load correctly, but with debug option theme loads correctly. I want to publish my application with Release option only. If anyone face this issue before and get any solution then please help me.
I have experienced this before when using bundling.
Say for instance your css file is located at: /Content/css/css.css
This css file then makes a reference to another file, or for example an image at /Content/images/image1.png via url('../images/image1.png').
You then set up your css bundle # /bundles/css.
All appears great in debug mode. However, when you set <compilation debug="false" .... in your web.config, suddenly the references made in the css file breaks. If you open your console in Firebug/Chrome dev tools and check the network tabs, you'll see resources failing to load, from an incorrect URL.
This happens because when debug mode is off, all the files are bundled and minified like they would be in production. In this case, the CSS file would be bundled and served from the URL /bundles/css. This results in the relative URL reference breaking. Where it once referenced /Content/images/image1.png, it now references /images/image1.png.
You have a few options to solve this:
Serve your bundled css files from the same folder as the actual css files. eg. /Content/css/cssbundle. This can become very tedious quickly.
Change all relative references in your css files to absolute references. eg. ../images/image1.png would become /Content/images/image1.png. This does mean you can't use a lot third party CSS bundled out of the box, you would have to check/change relative references if you wanted to bundle them.
Use the BundleTransformer nuget package. It automatically transforms relative urls to absolute ones during the bundling process.
The main differences of StyleTransformer and ScriptTransformer classes from a standard implementations: ability to exclude unnecessary assets when adding assets from a directory, does not produce the re-minification of pre-minified assets, support automatic transformation of relative paths to absolute in CSS-code (by using UrlRewritingCssPostProcessor), etc.
I personally recommend 3 as it is the easiest to maintain long term.
I have a simple project that contains these two bundles:
bundles.Add(new ScriptBundle("~/Scripts/jquery").Include(
"~/Scripts/jquery/jquery-{version}.js",
"~/Scripts/jquery/jquery-ui-{version}.js",
"~/Scripts/jquery/jquery.unobtrusive*",
"~/Scripts/jquery/jquery.validate*"));
bundles.Add(new StyleBundle("~/Styles/jquery").Include(
"~/Styles/jquery/jquery-ui-1.8.22.custom.css"));
This seems to work fine locally (debug mode so they aren't bundled); however, once I published the files to my file system, and move them out to the server, it is no longer functioning correctly:
I can see that both (bundled) file references are on the page; however, if you look at what the server actually sent, both files are blank.
What would cause the server to send blank files for these two bundles?
Doing some more research, I could see for those two files the server was actually sending a 301 redirect response to a different generated file, and these generated files were the blank ones I was receiving.
Since this server has several applications and sites running on it (some mvc), I thought this might be some weird bug with the bundling system, and renamed my bundles from 'jquery' to just 'jq', since other applications are probably using those names, and that did solve the problem
I have two different css files... style.css and style_main.css
both are used separately in different layouts for the same application. In development mode everything works fine, but when in production mode, caching happens and both css files are loaded as all.css?xxxxxxx but unfortunately all.css is made from style.css and does not update with the change in layout. how do i prevent this???
When you deploy the code to the production server, you are probably also deploying the all.css file. Have you tried excluding this file from your version control system? When you update style.css etc on your development machine, commit the changes and then redeploy, rails will re-generate all.css if it finds that it isn't already in the public folder.