Whenever I am working in Visual Studio I always found that it will not resolve the css class names in my html. The CSS Class names will appear with the green squiggly line in Visual Studio but then the page will render fine when viewing it in the browser. So I know the css file is referenced correctly in my master page but Visual Studio is just failing to resolve it. Also the Design View will not show any of the css styles either.
See this post by Jeff King about getting Visual Studio to be able to find the javascript file with the intellisense: JScript IntelliSense FAQ.
In particular read point #4, third bullet:
Site-Relative Paths - These are paths
of the form "/folder/file", and is
calculated from the base of your site
(http://site/application/folder/file).
This approach is supported by ASP.NET
Web Forms and ASP.NET MVC. However,
it is not supported by Visual Studio.
The reason is because Visual Studio
does not always know the final
deployed location of your site and
thus the path resolution cannot be
guaranteed. Given that quite we've
seen few folks are using site-relative
paths, we could consider making an
assumption just resolving this type of
path to the root of the project.
Given the risk that you may think your
site is working when it's really not,
I wanted to see how many people were
supportive of this.
Notice the “[Site-Relative Paths are] NOT supported by Visual Studio”. I always use site relative paths for my javascript and css files so the solution to get Visual Studio to find your javascript files is the same solution to get Visual Studio to find your css files:
<link href="/content/default.css" rel="stylesheet" type="text/css" />
<% if (false) {%>
<link href="../../content/default.css" rel="stylesheet" type="text/css" />
<% } %>
And now Visual Studio can find the CSS file and validate my CSS Class names exist (and Design View looks so much better too).
Posted on my blog here:
Why does Visual Studio not resolve my CSS class names?
-Jeff
I just saw an answer to this, so I thought I'd share it.
You can get VS2008 to recognize your CSS file by going to the View/Manage Styles toolbar and adding your CSS file that way. When I did it I saw my CSS file in the Manage Styles list but it had a warning icon because VS couldn't see it for some reason. I deleted and re-added it, and now VS is finding my styles (no green error squiggle) and Intellisense is working. Much relieved!
Tried to just close the project and open it again? It might be that it's just a bit slow, or you're using some sort of path to the stylesheet (generated on basis of other data or whatever) that can't be read directly by VS.
Never experienced the same (VS08).
Related
I am working on an ASP.NET MVC project. I designed my webpages in visual studio. At first, I just copied my HTML code into the .cshtml documents, and I moved the .css files to the appropriate locations (in wwwroot).
When I did so, at the end of the .css files, there was the following link:
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/styles.min.css?h=a9f290cd0cc57883e137369b4ae648cc">
I did not worry about the characters after the .css file extention at the time. The stylesheets worked with no issues.
After exporting again, I got new numbers at the end:
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/styles.min.css?h=cd91b4591da6e3a842e0881e1a97d069">
I assumed this would be no problem, and that I could just replace the file. I replaced the file, and I replaced, the link. As result, all html pages associated with those stylesheets stopped working with the stylesheet. I checked the network, and it did seem that my browser was legitimately linking the stylesheet.
I reverted back to the original link, and the only styles missing were the new styles I added. It seems as though it is referencing an older stylesheet (which I cannot see).
Update:
As I expected, the numbers at the end were version numbers.
Workaround: when you export from Bootstrap Studio, there is a check box that determines whether or not to version the assets exported. It was previously checked. I simply unchecked it, and replaced the files and the corresponding links (to links that did not contain version numbers). Everything worked great.
I believe that the issue began in the bootstrap.css file with this line of code:
sourceMappingURL=bootstrap.css.map
I also believe that the solution to this problem would be to replace the bootstrap.css.map file (which I apparently forgot to do) so that the version mapping will be updated.
If versioning is not desired, then one can do as I did, or they can comment out the line of code like this.
I use Spring and have found this answer to similar question, however it not at all satisfactory since it requires changing project structure:
Get Eclipse to recognise CSS included via context in Spring MVC project
So the question is, can I somehow set Eclipse to ignore "Undefined CSS class" warning.
It's not just about Spring, I might have some CSS classes I use in JavaScript that are not present in CSS spreadsheet or any other reason. The warning is shown on every element on html that uses css class that it cannot find, say:
<div class="js-something">Something</div>
This class is not going to be defined in .css file since it is only used in JavaScript. Same thing with Spring where .css is connected with:
<link href="<c:url value='/css/style.css'/>" rel="stylesheet" type="text/css" />
Or in AngularJS project where html files are added with ng-include. This warning is really barely helpful, it probably should be even disabled by default. I've looked all through Eclipse settings but couldn't find any way to ignore this kind of warnings. Can anybody help me get rid of those?
Allright, I've found it. Funnily enough, it is under "Validation" if you edit project preferences, but not in overall preferences, that's why I couldn't find it when searching preferences by "Validation".
In project preferences: Web Resources -> Validation -> CSS
In overall preferences: Web -> HTML Files -> Web Resources -> CSS
Finally my projects are no longer riddled with yellow markers.
I installed Visual Studio 2015 this week. However I discovered that I have no intellisense in my Razor Views.
In Visual studio 2013 it worked fine.
My all my css files are under ~/Content/css/ (*.min.css), including bootstrap.
Here is the bundle config:
bundles.Add(new StyleBundle("~/Content/smartadmin").IncludeDirectory("~/Content/css", "*.min.css"));
When I try to use some bootstrap css in my razor view, nothing pops up in the autocomplete box. There should be a purple icon next to the bootstrap classes right..? There are no icons and no css classes listed which is available under the bootstrap package.
I did a sanity check and created a new MVC 5 application. This comes shipped with bootstrap. This works, all the intellisense is there.
How do i fix this issue? Surely it must be a problem with my Solution? Does it not like the css files to be under a sub folder under content?
UPDATE: So i copied in the unminified versions of the files, then it got picked up. So anyone know the reason why VS does not pick up minified files for intellisense?
It seems like the solution is to add non-minified Files to your solution in order for intellisense to work. I think it is due to Microsoft splitting out the minifier into a separate extension.
If your project type is an ASP.NET web application and you are using a 'Master page', the easy fix is to add a link to the css file in the master page. For example, in the master page 'head' section I add:
<link rel="stylesheet" href="Content/bootstrap.css" type="text/css" />
ASPX and other WebForm files using the legacy editor do not benefit from this implementation in VS 2013, but may adopt the new system in future releases.
But you can still use this feature as follows:
right click on the default.aspx file in the Solution Explorer
open with
select HTML Editor
ok
If someone comes here and the accepted solution doesn’t work.
In my case I had to remove the database project (.sqlproj) from the solution for the Bootstrap css class intellisense to work.
Remove the database project then restart Visual Studio.
And to be clear. This is not a good solution as removing the database project is not what you want. So, hope someone finds a good solution to this weird bug.
In my case, the intellisense not worrk because the path of bootstrap files was changed then files are not included in the project.
After adding files to the project works fine.
I know... It is a simple solution. Sorry!
I got it worked by ensuring all actual scripts are in place and in order.
<script src="Scripts/jquery-3.2.1.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/angular.js"></script>
<link href="Content/bootstrap-theme.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
After that I closed the visual studio solution and reopened it.Intelli-sense started working for bootstrap afterwards.
What worked for me: Link to the full bootstrap css, close the view(s), rebuild the solution, open the view. Intellisense worked. Change to the minified css, close the view, rebuild, open the view. Intellisense still working.
So I'm watching an online course for Visual Studio, and right now I'm working with some simple CSS. However, while the tutorial uses CSS Properties and Style Manager to simplify the styling, neither of them works for me. If I open styles.css or any .aspx page using the stylesheet, Style Manager and CSS Properties keeps saying "There are no items to show for the selected documents".
Does anyone know what the problem is? Shouldn't I now be able to work with my stylesheet using these two features?
The Default.aspx using the stylesheet:
Thanks.
So far I can't find a question or fix for this. I'm sure it's something simple I'm missing.
I have a style bundle with a bunch of minified CSS, and I am decorating HTML elements with the classes inside. Everything is working great.
Intellisense and ReSharper however are both bugging me about the CSS the classes being unknown. I'm guessing this is because they cannot peek inside the bundles.
Question: Is there a way to fix this?
<!-- Style Bundles in HEAD tag-->
#Styles.Render("~/bundle/style/css")
#RenderSection("styles", false);
<!-- HTML elements in BODY tag: "row" is an unknown css class -->
<div class="row">
<p>Lorem ipsum</p>
</div>
Update: Visual Studio 2012. LESS conversion and intellisense works for single directly referenced files. My situation is that intellisense breaks when referencing a LESS bundle.
Update 2: Here's the code showing the BundleConfig.cs since it isnt clear
var customStyles = new Bundle("~/bundle/style/css")
.Include("~/Content/normalize.css","~/Content/*.less");
bootstrapStyles.Transforms.Add(new LessTransform());
bootstrapStyles.Transforms.Add(new CssMinify());
bundles.Add(customStyles);
Notice we are using Bundle not StyleBundle which is necessary because we want to specify the LessTransform() class and skip the built in CSS transformer. The LessTransform object is a custom object that simply reads in all the LESS content and concatenates it on a StringBuilder and then calls dotless's converter... out comes a huge CSS string that is minified and returned. The question is why cant VS or ReSharper peek at the returned CSS and help check class styles?
Here's a post on jetbrains blog. It's a bit out of date, but Jura went on record stating that there were no plans on supporting LESS (yet).
User:
Are there any plans to support LESS? I don’t care a whole lot about full support, but it would sure be nice if it could at least bring highlighting and code completion support into .less files and have it handle nested rules.
Jura Gorohovsky :
No, no such plans yet. Can you point me to a publicly available
project that uses LESS extensively so that we can take a look at it to
determine the scope of work?
Link
Late edit:
Web WorkBench from Mindscape may provide what some people coming to this thread are looking for. They are very response to bug fixes, and have been making some solid improvements to intellisense in the LESS world.
Have you installed the js extension to Visual Studio 2012? Go to Tools | Extensions and Updates and then SDKs if you have many installed.
Don't think the bundling has any affect on your intellisense, I've tried with and without and my intellisense is still there. Ensure you css stylesheet is included in your solution and maybe test with a more specific class, e.g. "onebeatconsumer" instead of "row" (there could be a clash somewhere with this)
If you are using LESS, this could most definitely be your issue as it visual might well not be able to parse LESS syntax as it only generates the full styles at runtime. Does styles in a standard css stylesheet work okay for you?