I have added bootstrap.less to my ASP.NET MVC project in Visual Studio 2015 Community through NuGet, how can I compile them?

Question

I have an empty ASP.NET MVC project, created in Visual Studio 2015 Community Edition. I have installed WebCompiler, and added bootstrap.less through NuGet.

It created a file structure in a folder Called bootstrap in my Content Folder. There are also a bunch of .less files in the mixins folder. I can compile all the .less files in the mixins folder with no issue. However if I try to compile any file outside the mixins folder (in the bootstrap folder, I get a compiler error.

Severity Code Description Project File Line Suppression State Error NameError: .responsive-invisibility is undefined in \Content\bootstrap\responsive-utilities.less C:\Users\cnance.AVIBE\documents\visual studio 2015\Projects\BootsrapLessExample\BootsrapLessExample\Content\bootstrap\responsive-utilities.less 32

I get a different error depending on which one I try to compile, but no matter which one I pick I get some error.

I am pretty new to .less and have not worked with much Grunt or npm, I do have them installed on my machine. Do I need to do something with one of them? I looked at https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler and from what I see there, I should be able to do everything with Visual Studio and Web Compiler, but I must be missing something.

Answer 1

You cannot compile the .less files in the bootstrap folder separately because those files include undeclared variable, just like the error log display: “..responsive-invisibility is undefined in…”.

If you want to compile the .less files in the bootstrap folder separately, you need to import the file, which including the defined variable, in your situation is responsive-visibility.less file in mixins folder.

@import "mixins/responsive-visibility";

Please refer to: How to use variables in different less files?