我如何一起使用Twitter Bootstrap，MVC和Visual Studio？

Question

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);

Answer 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! :)

Answer 2

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, ie 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.

Answer 3

Have you tried Mindscap Web Workbench ?

They have an article on how to set it up for use with Twitter Bootstrap .

Answer 4

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