Using LESS with MVC5 in Visual Studio 2013 with Web Essentials - asp.net-mvc

I have installed Visual Studio 2013 with Update 2 and installed Web Essentials.
I had thought this was going to make adding LESS to my views a piece of cake, but am missing something.
The editor is great, and I imagine that it is compiling to css on save...
But I don't know where the generated css is, and I don't have any clue as to how to get it reference in my view.
I've tried a lot of searching, but can't get through the web of links about installing this and the features of that.
Any help at all will be greatly appreciated.
Thanks!

When you add a .less file and save, the Web Essentials will compile and generate the .css and .min.css files. You will see an arrow in your solution explorer, or you can also confirm in your file system that the files are in the same folder.

Haven't used less with vs2013 but I have used sass and my guess would be the same. By default the generated css gets generated in the same directory as the source (as it seemed to me) but you can check via tools>options>web essentials and there should be a set of options for less compile on save, build and directory to name but a few.
If you right click on the solution there should be an option to create a web essentials settings file for the solution - these create and adds a json file of web essentials settings to the solution which means your settings are local to the solution which could be important if you are changing the output directory.

Related

How do I force Visual Studio 2019 to produce .csproj.user file?

I am developing a C# project in Visual Studio 2019. I've read that it should produce .csproj.user files automatically, but it is not. How do I force Visual Studio to produce a .csproj.user file? Thank you.
As mentioned by Hans Passant above, this file is created when there exist user-specific settings. Typically it is created by changing any of the Project->Properties->Debug settings to non-default values (i.e. specifying command line arguments or setting an absolute path for the working directory).
However, as I already have pointed out in the other question, I believe you should not commit this file and find out why you have problems without it. Or rather, why VS adds some relevant information to this file instead of the main csproj.
In my case strangely some references that should have been in the SDK project had found their way into the csproj.user file. I don't know why this happened.
Once I put the references back in the SDK project I had no need for the csproj.user after all.

Asp.Net MVC Core 3.1. why index.cshtml.g.cs added to the view folder and no error

Recently I started to notice that my project is adding views with xxx.chtml.g.cs. I tired to search for the answers within stackoverflow and other resources, and the answer I am getting that these files are generated due to some error. But for me there neither is no issue nor getting any compile error. This generated files have hardcoded obsolete path to the resources, and this is what my concern is, if I was working in a the team and other team member would pick up the code what if these files are to be used and won't find the resources on the path.
These files are added into the debug folder: MySolution\MyMVCProject\Debug\netcoreapp3.1\Razor\Views\Disenfection
If someone suggest me to delete the folder or tells me it won't effect then my question will be how I can keep my code clean and do not generate this unnecessary files. I am using asp.net MVC and VS 2019 community addition.
[
I figured those files are auto generated files. I used Visual Studio 2019 and when checking codes. I went to each suspicious files, right clicked on it. If it said 'Local file ignore' I clicked on it and it was saved in .gitignore file. This way I was able to not check-in my code.

TFS ignores folders starting with $

I have an application that depends on a third party library where a file starts with sign '$'.
I have read about this issue, which is discussed in this thread Visual Studio Online TFS refuses to "source control" filenames starting with $
Apparently there is no solution - but i really need a solution.
Does someone have a workarround to this or any ideas on how to solve it?
The thread is more than 2 years old so maybe something has changed that i do not know of :)
Thanks.
Still not changed. Files and folders you add to Team Foundation version control must conform to the following restrictions:
Source Link: Version control files
Files stating with $ such as $xxx.dll will auto change to xxx.dll when you checked in TFS source control.
In other words, you could not keep files stated with $ characters in TFS source control system. If you force rename a file already in source control, you will get a pop up error such as below screenshot:
I'm afraid the only workaround is renaming the third party library file.

Linking to an external www-folder - Tools for Apache Cordova (VS 2015)

For a project I'd like to use an existing website as a base for a cordova app. My project setup looks as follows:
One Solution with two projects
A ASP.NET webservice project (with website aka html/js/css)
An tools for apache cordova project
I don't want to copy the html/js/css files from the website on every build. Instead, I thought I could get away with some kind of a link to the www-folder in the ASP.NET project. I tried several approaches:
Creating a filesystem link (tried 'mklink' with parameters /D and /J - /H is not working for directories
Editing the .jsproj file and add a tag to link to the other project's www-folder
The second approach didn't work at all. Just got some weird errors when trying to load the project again (saying something about file duplicates).
The first approach worked a little bit: It is working, when targeting the windows platform. It is NOT working, when targeting iOS.
When targeting iOS, everything is copied just fine to the platforms\ios folder (read, all the content of the linked www folder is copied to the platforms\ios\www folder). But it is not copied correctly to the remote build tool on Mac OS X! It really just copies the directory link as a file. Remotebuild then failes with a 'missing www directory in top level' message.
Any suggestions how to add a link so the content is copied (instead of the actual link)?
Is there a way to take detailed influence on the build process for specific platforms?
Is there a way to create a hardlink to a directory in windows? What are the drawbacks?
I'd really like to avoid copying the files on build (which would be simple enough with a prebuild script), because there's a high risk of loosing changes made while debugging.
I'm aware that setting a link is also not the best solution, since it has to be done per machine and can't be checked in to a version control system. So, if somebody knows of a better aproach to handle my scenario, let me know.
I work on the Tools for Apache Cordova in Visual Studio at Microsoft.
I'm sorry but VS-TAC does not support add as link. To prevent confusion we removed the option in update 3.
The best solution I can give you is to copy files from one project to another. Another user asked this question a week ago and came up with a hacky solution. Please see this for more information:
VS2015 typescript cordova add as a link
Sorry for the trouble and thank you for the feedback!

How can I use Twitter Bootstrap, MVC and Visual Studio together?

I am starting to try out Bootstrap. I have already downloaded the dotless extension but I am confused as to what to do next. Looking at the bootstrap files I see a lot of .less files. Can someone explain where I should put these within the MVC folder structure and how can I set up the application so that when I make a change to a color variable then my .css files get updated.
Update
As suggested I placed all the .less files in the same directory as my css.
However what should I do next? I tried to view the URL
http://127.255.0.0:82/Content/Stylesheets/bootstrap.less
in my browser but got the following message:
(
Expected '}' but found '~' on line 522 in file 'mixins.less':
[521]: .spanX (#index) when (#index > 0) {
[522]: (~".span#{index}") { .span(#index); }
------^
[523]: .spanX(#index - 1);
I currently compile the less files on build with nodejs.
You need to install node.js.
Once installed, in command prompt type: "npm install less -g" this installs the latest less globally (-g on the end for global).
In visual studio, go to Build Events in the websites properties page and put in a "pre-build event command line" like the following:
lessc $(SolutionDir)path-to-main-less-file.less > $(SolutionDir)path-to-where-css-is-output.css -x
EDIT: Bootstrap now uses Recess and npm command has changed as seen here.
Go easy on me, It's my first post! :)
This is a known issue in Dotless:
https://github.com/dotless/dotless/issues/155
Basically the Bootstrap source code is using LESS features that are not yet supported in the version of Dotless that you use. Apparently support has been added in the latest source though, so you should be able to resolve this by compiling Dotless from the latest source.
It is not enough to download and reference dotless.Core.dll, because the binary files aren't up-to-date enough, i.e. they do not contain the latest features that you need for Bootstrap. Only the source files contain the latest changes, so you have to produce the dotless.Core.dll by compiling the latest source with Visual Studio. Of course these features will be included in the .dll download when they next decide to update it.
Dotless produces the result file bootstrap.css "on the fly". You never see that file on the disk, as it is produced by compiling the .less files when they are requested via HTTP. The CSS that is produced is only cached in memory. However you could always request the .less file in your browser and save what you see to a .css file. That would work but there isn't much point in doing it if your Dotless installation is working properly.
However, if all you want is a bootstrap.css file with your customized values, you can also use this online tool on the Bootstrap website. It will let you change the variable values and download the resulting CSS.
Have you tried Mindscap Web Workbench?
They have an article on how to set it up for use with Twitter Bootstrap.
You can use Combres to with my dotless plugin here. All you need to do is reference bootstrap.less and all the imports will work out of the box with clean Bootstrap less files. Combres will build and cache the bootstrap file and even compress it with other non-Bootstrap css files. This is the ideal setup.
http://pknopf.com/blog/using-less-correctly-with-combres

Resources