Bundles are new to me but in my _layout.cshtml file I have the following:
#Styles.Render("~/Content/css")
And in the App_Start\BundleConfig.cs file I have the following:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/Portal.css"));
When I view the site on localhost by launching it from Visual Studio, all the styles are inserted, like so:
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/Portal.css" rel="stylesheet"/>
However when I deploy to testing server the portal6.css file is not included in the markup, and in fact was not even copied into my Publish directory. I manually copied that CSS file to the Content folder but it seems like the bundle is not referencing it.
Does any one know what the issue is?
...in fact was not even copied into my Publish directory. I manually copied that CSS file to the Content folder...
Sounds like it's just a case of marking the Build Action of the project file as Content in project file properties - otherwise, it will not be "published" as you have noticed/stated.
To view the portal.css properties:
select the file
then F4 or ALT + ENTER
in Properties tab/window check if Build Action is set to Content (chances are that it's set to None having been "manually copied")
example view of some css file (font-awesome.css) that needs to be "published"
Note: Assumes the file is "included in Project" (not just in file system) - so it should be visible in your Project view in VS (without the "view all files" toggle enabled).
Hth...
Check #1
In Visual Studio, right-click the file, verify BUILD ACTION = CONTENT. CONTENT = Include to deployment package files. This is the most common issue is this is set to NONE.
Check #2
If the above is correctly set, the next thing that can happen is your build is not seeing this property when building the project independently of the solution. This is what has happened to me. For some reason, the build configuration does not update the new property set on a file that's may be added to the project outside of the GUI.
Visual Studio
1) Perform "Clean Solution" or Clean under "Build"
2) Now "Build" or perform "Publish" and the file will now be part of the deployment package folder.
BONUS NOTE: And lastly, also note if your web.config setting debug=false, the bundle will build the default file names "file.css". If debug=true, this instructs bundle to look for "file.min.css" version and will grab the minifying file version. So this can cause unexpected results as well if the CSS file contents are different or contain css classes that don't match the original css file.
Related
I have the following bundle in my BundleConfig:
bundles.Add(new StyleBundle("~/Content/Basic/globalCss").Include("~/Content/Basic/global.css"));
I am using the following to render the CSS bundle:
#Styles.Render("~/Content/Basic/globalCss")
On my local machine (debug environment) the CSS file is included/loaded via its absolute path. I have compilation turned off/false for debug, so this makes sense. When I push to a QA environment (compilation turned on/true), I see the following virtual path being included in the page:
<link href="/Content/globalbasicCss?v=6i8x1Cxf8pXm5g9uxAk8-wcO02DFmeAgYLWpJk-3r_g1" rel="stylesheet">
This was the old virtual path that I had was ~/Content/globalbasicCss.
Why is my bundle not using the new virtual path I provided ~/Content/Basic/globalCss? Is this because there were no changes made to the CSS file included in the bundle, by any chance?
That is the bundling and minification feature. Your CSS bundle is minified and if you had more files they would be bundled in one file.
This happens when you usually build in release mode with the web.config setting
<compilation debug="false">
More information here - http://www.asp.net/mvc/overview/performance/bundling-and-minification
Turns out I needed to make changes to the actual bundled CSS files in order for that bundle virtual path to update. I'm not sure why this is, and would appreciate anyone with better understanding of ASP.NET bundling explaining why this happens this way.
I tested my Netbeans setup with a html5 project and the css file was generated from Less file accordingly. then, I went ahead with a drupal bootstrap project and got no css file.
With the html5 project, I can select the root directory, hit the right button of the mouse, select "new->LESS file" to create a less file xxx.less under root/less directory and a css file xxx.css shows. But with the drupal bootstrap project, my best luck is using command-line 'lessc less/xxx.less css/xxx.css' to generate the css file. Did I overlook anything?
It seems that Netbeans 8 has a pretty "dumb" way of looking for LESS files by default. That default is that Netbeans looks in the project root for a folder called "less" that it then monitors for changes and compiles the output into a folder called "css" (both in the root of the project).
When working on something like a Drupal or Wordpress project, you might have your content be logically saved (for some reason) in a folder like: wp-content/themes/my-theme/lib/less.
So, what you need to do is add and/or modify the input and output folders to make sure that you're achieving the desired results. From the Project Properties windows select "CSS Preprocessors" and from there you can choose to either modify the defaults, or you can add a new folder to the watch list and have it get compiled into any directory of your choosing. The Input and Output paths are relative to the document root so you might do something like: /lib/less for the input source and output directly to the /css folder or it could be something like /static-assets/styles/compiled/css (for all that Netbeans or anyone else cares).
It is rather strange that Netbeans doesn't automatically set the input folder to the folder where you created the LESS file but such is life, it's not the first time I've experience a "Huh?" moment when working with Netbeans.
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 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?
Well i have a working spring-boot app that is running on a local computer just fine. However I noticed that when i do mvn package then none of my css or java scripts, locates in
/src/main/wepapp/css
are being copied into the jar file (package) created in the target directory.
spring boot reference guide says
65.3 Convert an existing application to Spring Boot "Static resources can be moved to /public (or /static or /resources or
/META-INF/resources) in the classpath root."
24.1.4 Static Content "Do not use the src/main/webapp folder if your application will be packaged as a jar. Although this folder is a
common standard, it will only work with war packaging and it will be
silently ignored by most build tools if you generate a jar."
So that means that i can put all my js and css folders into the folder
/src/main/resources/static
i.e. now my structure looks like that
/src/main/resources/static/css/
/src/main/resources/static/js/
all of my thymeleaf templates however are still located in
/src/main/resources/templates/
I did that, and as far as i understand know i need to add the ResourceHandler to my ResourceHandlerRegistry. Previously when all of my ccs were in "/src/main/wepapp/css/" my ResourceHandlers looked like that and it worked very well for me.
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/pdfs/**").addResourceLocations("/pdfs/").setCachePeriod(0);
registry.addResourceHandler("/img/**").addResourceLocations("/img/").setCachePeriod(0);
registry.addResourceHandler("/js/**").addResourceLocations("/js/").setCachePeriod(0);
registry.addResourceHandler("/css/**").addResourceLocations("/css/").setCachePeriod(0);
}
I have tried adding multiple handlers like
registry.addResourceHandler("/css/**").addResourceLocations("/css/").setCachePeriod(0);
or
registry.addResourceHandler("/css/**").addResourceLocations("/static/css/").setCachePeriod(0);
or
registry.addResourceHandler("/css/**").addResourceLocations("/").setCachePeriod(0);
etc.
but none of them worked for me.
The html templates are displayed but the web browser console is reporing 404 when trying to locate /css/corresponing.css or /js/corresponing.js
I have deliberately disabled Spring security in my test project, in order to simplify debugging of this problem.
One more thing thing that i do not completely understand is the deployment assembly. I have read an article that said that when i do want to have particular folders into my target package jar file generated by maven, i do need to include those folder into my deployment assembly, well i did however "mvn package" is still not copping all of the content(inlcuding subfolders) of my /src/main/static folder into the target jar file. I see however the "templates" folder copied into the jar file. So there is some other magic happening behind the scene.
Here is how do i declare the css in my thymeleaf layout i.e.
/src/main/resources/templates/layout.html
<!DOCTYPE html>
<html>
<head>
<title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE">Task List</title>
<link rel="stylesheet" type="text/css" media="all" th:href="#{/css/syncServer.css}" href="../css/syncServer.css" />
...
</head>
<body>
...
</body>
</html>
My question is: Is the configuration i done so far correct and if so what other options/settings i need to be aware of in order to make the app find the css files locates in /src/main/static/css/
Addition one
test project
git#github.com:TheDictator/sArchitecture.git
If you move you the whole static directory into the resources and totally remove the addResourceHandlers configuration, then everything works fine.
That means that resources structure would look like the following image: