I'm experiencing a peculiar issue and I'm having trouble diagnosing it.
I am using LessJs in an ASP.NET MVC web application and the less file is not being processed and I am seeing my variables in the "F12" debug tools -- and the style is not applied as expected as a bi-product.
The markup looks like this.
#Scripts.Render("~/bundles/modernizr")
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/site.less" rel="stylesheet" />
<script src="~/Scripts/less-1.5.1.min.js" type="text/javascript"></script>
I am seeing the files correctly delivered to the browser (from Network tab)
There are NO errors in the console.
but when I inspect my element, I see this:
The styles from bootstrap.css are applied as expected.
Am I missing a step? I've used less with ASP.NET before, this one's got me stumped.
Thanks!
Solved. This issue was that the link tag that references the less files had an incorrect rel attribute. For less it should be stylesheet/less as opposed to just stylesheet, which is used for CSS.
<link href="~/Content/site.less" rel="stylesheet/less" type="text/css" />
Related
I am trying to run this links with thymeleaf but it doesnt work
, the static version with th: runs fine but when using jetty and trying to get thesame css files at run time it does not work
<link rel="stylesheet"
href="../../resources/static/css/font-awesome.min.css"
th:href="#{/resources/static/css/font-awesome.min.css}">
<link rel="stylesheet"
href="../../resources/static/css/bootstrap.css"
th:href="#{/resources/static/css/bootstrap.css}">
If you're accessing your app from http://localhost:8080, try removing the absolute path.
See if this works:
<link rel="stylesheet"
th:href="#{/resources/static/css/font-awesome.min.css}"
href="/css/font-awesome.min.css" />
<link rel="stylesheet"
th:href="#{/resources/static/css/bootstrap.css}"
href="/css/bootstrap.css" />
Also, try to access you css on the browser URL to see if it shows its content:
http://localhost:8080/css/font-awesome.min.css
or
http://localhost:8080/css/bootstrap.css
Hope it's somehow useful.
I have a ASP.Net MVC project in maintenance. Apparantely the IISExpress is adding portnumbers to localhost which is fine. except when the relative style sheet link does not contain the portnumbers?
How come the portnumbers are not added automaticaly? Seems pretty logical to me that when Visual Studio 2013 starts up it sends the browser to localhost with portnumber but when building the relative style sheet links it does not?
Guy
In view file:
<link rel="stylesheet" href="./metrouicss.css" />
After running in IISexpress:
<link rel="stylesheet" href="http://localhost//Templates/Design 2/metrouicss.css" />
Since IISexpress is running on port 42532 I would rather see it rendered like this:
<link rel="stylesheet" href="http://localhost:42532//Templates/Design 2/metrouicss.css" />
Sorry try this (I missed the rest of the path):
<link rel="stylesheet" href="~/Templates/Design 2/metrouicss.css" />
Or
If you are using MVC 5 you can use the BundleConfig class:
Public Sub RegisterBundles(ByVal bundles As BundleCollection)
bundles.Add(New StyleBundle("~/Templates/css").Include(
"~/Templates/Design 2/metrouicss.css"))
End Sub
And in view use the following in the tags:
#Styles.Render("~/Templates/css")
I'm having an issue with the bundling and minification feature of ASP.NET MVC 4 Basically I have the following bundle setup:
bundles.Add(new StyleBundle("~/backendcss").Include(
"~/backendContent/bootstrap/css/bootstrap.min.css",
"~/backendContent/assets/jui/css/jquery-ui.css",
"~/backendContent/assets/jui/jquery-ui.custom.css",
"~/backendContent/plugins/uniform/css/uniform.default.css",
"~/backendContent/plugins/fullcalendar/fullcalendar.css",
"~/backendContent/plugins/fullcalendar/fullcalendar.print.css",
"~/backendContent/assets/css/fonts/icomoon/style.css",
"~/backendContent/assets/css/main-style.css",
"~/backendContent/plugins/pnotify/jquery.pnotify.css",
"~/backendContent/plugins/msgbox/jquery.msgbox.css",
"~/backendContent/IntroJS/css/introjs.css"));
when they are placed on the page they come out like so:
<link href="/backendContent/assets/jui/css/jquery-ui.css" rel="stylesheet"/>
<link href="/backendContent/assets/jui/jquery-ui.custom.css" rel="stylesheet"/>
<link href="/backendContent/plugins/uniform/css/uniform.default.css" rel="stylesheet"/>
<link href="/backendContent/plugins/fullcalendar/fullcalendar.css" rel="stylesheet"/>
<link href="/backendContent/plugins/fullcalendar/fullcalendar.print.css" rel="stylesheet"/>
<link href="/backendContent/assets/css/fonts/icomoon/style.css" rel="stylesheet"/>
<link href="/backendContent/assets/css/main-style.css" rel="stylesheet"/>
<link href="/backendContent/plugins/pnotify/jquery.pnotify.css" rel="stylesheet"/>
<link href="/backendContent/plugins/msgbox/jquery.msgbox.css" rel="stylesheet"/>
<link href="/backendContent/IntroJS/css/introjs.css" rel="stylesheet"/>
First problem is that the Tilda ~ is not coming in the beginning of the link and I think that's one of the problems (site not rendering properly) now all of the above css stylesheets are resolving but there are a lot of imports and relative urls (images) and I think those are getting messed up (without the bundles, if I just point to ~/backendContent/.... everything is working just fine
Second problem is that when I set BundleTable.EnableOptimizations = true; there are a lot more problems and digging deeper I get a huge list of
(4368,1): run-time error CSS1019: Unexpected token, found '#import'
(4368,9): run-time error CSS1019: Unexpected token, found 'url("layout.css")'
I don't know if this is important but the minified and rendered style link produced by #Styles.Render("~/backendcss") is:
<link href="/backendcss?v=eMX6YcVB78xPWZV9Dw6seHqsT742J8_M1irfUC0IdaQ1" rel="stylesheet"/>
Any Ideas? I'm sorry but this is the first time I'm using this feature and with this site having so many css and js it would save a lot of bandwidth and speed up the whole site. Plus its just plain cool (that is if I can get it to work)!!!
The ~ is not supposed to be rendered. That's a special character in asp.net which means the root of the application
I'm not sure why you are having issues with the actual minification, but that'd be pretty hard to diagnose without the source.
The link when optimized should look like that. the ?v=xxx at the end is for cache busting so that people get the updated css when you change the css files.
I think for minification to work you need to add in global.asax file
BundleTable.EnableOptimizations = true;
Also can you try to create different groups of for example keeping jqueryui separate from bootstrap and so on.
Darren Kopp is right "The ~ is not supposed to be rendered. That's a special character in asp.net which means the root of the application"..
And don't use ".min" because when you set BundleTable.EnableOptimizations = true; it will be minimize your files.. So it should be like this;
bundles.Add(new StyleBundle("~/backendcss").Include(
"~/backendContent/bootstrap/css/bootstrap.css",
"~/backendContent/assets/jui/css/jquery-ui.css",
"~/backendContent/assets/jui/jquery-ui.custom.css",
"~/backendContent/plugins/uniform/css/uniform.default.css",
"~/backendContent/plugins/fullcalendar/fullcalendar.css",
"~/backendContent/plugins/fullcalendar/fullcalendar.print.css",
"~/backendContent/assets/css/fonts/icomoon/style.css",
"~/backendContent/assets/css/main-style.css",
"~/backendContent/plugins/pnotify/jquery.pnotify.css",
"~/backendContent/plugins/msgbox/jquery.msgbox.css",
"~/backendContent/IntroJS/css/introjs.css"));
I'm using jqGrid 4.4.0 in an mvc2 application. The grid loads with the data fine. However, when I edit/add or delete records I get an 'Object doesn't support this property or method' error. This is how my setup looks like on the site.master page:
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="../../Content/ui.jqgrid.css" />
<script src="<s:url value= http://ajax.microsoft.com/ajax/jquery/jquery-1.7.min.js" type="text/jscript"></script>
<script src="../../Scripts/grid.locale-en.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
What am I missing?
okay, even i got this error many times...i worked it out with two solution...first try this one, if it doesn't work for you...then paste your exact code here, where u r getting that error.
you need to include this grid.inlinedit.js if you are doing inline edit and grid.formedit.js if you are doing form edit...let me know if this sloves your problem or not...if it doesn't i'll provide the second solution
I'm trying to get my css files bundling with the new MVC4 bundling.
I've added this to my _Layout.cshtml:
<link href="#Url.Content("~/Content/css")" rel="stylesheet" type="text/css" />
When my page renders I see the style being loaded, but nothing is in the request: http://localhost/Content/css
In Global.asax, I've enabled:
BundleTable.Bundles.EnableDefaultBundles();
Instead of EnableDefaultBundles, have you tried this?
BundleTable.Bundles.RegisterTemplateBundles();
Also, I don't think you're supposed to use #Url.Content. I have this and it works:
<link href="#System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")" rel="stylesheet" type="text/css" />
I had an error in my page which was causing this not to work. A partial view was getting called from jQuery and returned a 500 error. Fixing that resolved this problem, now all works well.