Как я могу использовать Twitter Bootstrap, MVC и Visual Studio вместе?

Question

Я начинаю пробовать Bootstrap. Я уже скачал расширение без точек, но я не уверен, что делать дальше. Глядя на файлы начальной загрузки, я вижу много файлов .less. Может кто-нибудь объяснить, где я должен поместить их в структуру папок MVC и как я могу настроить приложение, чтобы при внесении изменений в переменную цвета мои файлы .css обновлялись.

Обновление

Как и предполагалось, я поместил все файлы .less в тот же каталог, что и мой css.

Однако что мне делать дальше? Я пытался просмотреть URL

http://127.255.0.0:82/Content/Stylesheets/bootstrap.less

в моем браузере, но получил следующее сообщение:

( 

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

Сейчас я компилирую меньше файлов при сборке с помощью nodejs.

Вам необходимо установить node.js .

После установки введите в командной строке: «npm install less -g», это установит последнюю версию менее глобально (-g в конце для global).

В visual studio перейдите на страницу «Создание событий» на странице свойств веб-сайтов и введите «командную строку события перед сборкой», как показано ниже:

lessc $ (SolutionDir) путь к главному-менее-file.less> $ (SolutionDir) путь к тому, где-css-is-output.css -x

EDIT: Bootstrap теперь использует Recess, и команда npm изменилась , как показано здесь .

Полегче на меня, это мой первый пост! :)

Answer 2

Это известная проблема в Dotless:
https://github.com/dotless/dotless/issues/155

В основном исходный код Bootstrap использует функции LESS, которые еще не поддерживаются в используемой вами версии Dotless. Очевидно, что поддержка была добавлена ​​в последний источник, так что вы можете решить эту проблему, скомпилировав Dotless из последнего источника.

Недостаточно загрузить и сослаться на dotless.Core.dll, поскольку бинарные файлы недостаточно обновлены, то есть не содержат новейших функций, необходимых для Bootstrap. Только исходные файлы содержат последние изменения, поэтому вам нужно создать файл dotless.Core.dll, скомпилировав последний источник с помощью Visual Studio. Конечно, эти функции будут включены в загрузку .dll, когда они в следующий раз решат обновить ее.

Dotless создает файл результатов bootstrap.css "на лету". Вы никогда не увидите этот файл на диске, так как он создается путем компиляции файлов .less, когда они запрашиваются через HTTP. Созданный CSS кэшируется только в памяти. Однако вы всегда можете запросить файл .less в вашем браузере и сохранить то, что видите, в файле .css. Это бы сработало, но нет особого смысла делать это, если ваша установка Dotless работает правильно.

Однако, если вам нужен только файл bootstrap.css с вашими настроенными значениями, вы также можете воспользоваться этим онлайн-инструментом на веб-сайте Bootstrap. Это позволит вам изменить значения переменных и загрузить полученный CSS.

Answer 3

Вы можете использовать Combres с моим плагином без точек здесь . Все, что вам нужно сделать, это сослаться на bootstrap.less, и все операции импорта будут работать «из коробки» с чистыми файлами Bootstrap. Combres создаст и кеширует файл начальной загрузки и даже сжимает его с другими не-Bootstrap css файлами. Это идеальная настройка.

http://pknopf.com/blog/using-less-correctly-with-combres

Answer 4

Вы пробовали Mindscap Web Workbench ?

У них есть статья о том, как настроить для использования с Twitter Bootstrap .