Как скомпилировать папку Bootstrap-3.0.0-wip less в .css с Visual Studio и веб-Essentials 2012?

Ответ 1

Основываясь на changelog для Web Essentials, я бы сказал, что это было исправлено 31 июля 2013 года ( "Fixed LESS relative @импорт" ). Я просто попробовал это с Visual Studio 2012 (обновление 3) и с последними веб-Essentials 2012 и Bootstrap 3.0 в проекте MVC 4, и, похоже, он работал нормально (в частности, он генерировал bootstrap.css из bootstrap.less).

Для тех, кто хочет сделать то же самое, все, что я сделал после установки веб-Essentials, добавляло файлы .less в мою папку Css, добавлял файл boostrap.js в мою папку Scripts, добавлял файлы шрифтов в папку Fonts ( Bootstrap теперь использует шрифты вместо изображения спрайта) и включал скомпилированные файлы bootstrap.css и bootstrap.js в моем основном представлении. Обратите внимание, что я также щелкнул правой кнопкой мыши по одному из файлов .less, чтобы создать параметры решения (некоторый файл конфигурации, используемый веб-Essentials). И чтобы получить файл .css, сгенерированный в первый раз, я просто сделал поверхностное изменение и сохранил его.

Ответ 2

Чтобы скомпилировать папку Bootstrap без файлов с Visual Studio 2012 + Web Essentials 2012, вы должны сделать небольшую корректировку, так как веб-Essentials не может скомпилировать папку bootstrap less, отформатированную в github.

Добавьте bootstrap-3.0.0-wip folder в веб-проект Visual Studio. (мой проект оказался проектом ASP.Net MVC 4 Empty, но это не имеет значения.)

Переместите файл bootstrap.less(точку входа для всех файлов с меньшим количеством проектов) вверх по одной папке, оставив все остальные файлы в папке \less.

Он должен выглядеть так:

bootstrap.less
less\[all other less files].less 

Затем отредактируйте файл bootstrap.less, добавив префикс папки "less \" ко всем операторам @import следующим образом:

// Core variables and mixins
@import "less\variables.less";
@import "less\mixins.less";

// ...etc until all of the import statements include less\ at the start

Теперь сохраните проект. Перемещенный файл bootstrap.less должен быть скомпилирован в файл bootstrap.css и файл bootstrap.min.css, если у вас еще нет ошибки компиляции. (подробнее см. список ошибок)

Остальные .less файлы не будут компилироваться, потому что у них все еще есть ошибки (нет операторов @import для отдельных файлов), но это не имеет значения, поскольку вы скомпилировали важный файл.

Если вы интегрируете исходный код Bootstrap3.0.0-wip в проект ASP.MVC 4, вы можете использовать пакет MVC 4 для компиляции файлов JS.

Предполагая, что вы удаляете исходный код Bootstrap в папку в вашем проекте /Content/bootstrap, добавьте следующий файл App_Start\BundleConfig.cs:

// Bootstrap 3 script bundle
bundles.Add(new ScriptBundle("~/bundle/scripts/bootstrap_js").Include(
            "~/Content/bootstrap/js/bootstrap-transition.js",
            "~/Content/bootstrap/js/bootstrap-alert.js",
            "~/Content/bootstrap/js/bootstrap-button.js",
            "~/Content/bootstrap/js/bootstrap-carousel.js",
            "~/Content/bootstrap/js/bootstrap-collapse.js",
            "~/Content/bootstrap/js/bootstrap-dropdown.js",
            "~/Content/bootstrap/js/bootstrap-modal.js",
            "~/Content/bootstrap/js/bootstrap-tooltip.js",
            "~/Content/bootstrap/js/bootstrap-popover.js",
            "~/Content/bootstrap/js/bootstrap-scrollspy.js",
            "~/Content/bootstrap/js/bootstrap-tab.js",
            "~/Content/bootstrap/js/bootstrap-typeahead.js",
            "~/Content/bootstrap/js/bootstrap-affix.js"));

(Примечание: порядок этих js файлов был получен из Makefile, включенного в проект)

Ответ 3

Как получить .less для компиляции в .css с помощью Web Essentials 2012

Чтобы скомпилировать бездействующий файл с VS 2012 + Web Essentials 2012, ваши .less файлы должны быть бесплатными. Каждый файл .less, требующий импорта или микширования, должен указать его. Выделите ваш .less файл и просмотрите результат в панели предварительного просмотра. Если указана ошибка, ваша компиляция в .css не будет работать.

Он также помогает настраивать параметры веб-Essentials для компиляции файла .less после сборки.

Tools > Options > Web Essentials > LESS > Compile On Build = TRUE

Вы также можете настроить его для компиляции в папку 'css', установив следующее.

Tools > Options > Web Essentials > LESS > Compile to 'css' folder = TRUE

Этот параметр создает папку CSS в каталоге LESS, где он помещает файл [filename].css и [filename].min.css для каждого файла без изменений, скомпилированного в процессе сборки.

Что касается того, почему папка Bootstrap-3.0.0-wip.less не будет компилироваться с помощью Web Essentials 2012 (+ VS 2012)

a) Он не будет компилировать файлы .css, если есть ошибки в создании файлов без.

b) Web Essentials 2012 (+ VS 2012) еще не распознает несколько файлов без содержания в папке, все импортированные одним файлом точки входа, например, файл bootstrap.less в Bootstrap 3.0-wip ( если в каждом файле не указан требуемый импорт). Вероятно, это связано с тем, что пока еще нет способа указать файл точки входа. Из-за этого большинство файлов Bootstrap.less не скомпилируются, поскольку они не имеют своих переменных и миксинов. (так как mixins.less и файл variables.less не были импортированы в отдельные файлы). И так как они не скомпилируются, процесс компиляции .less → .css не работает.

c) Способ скомпилировать папку бездействующих файлов, зависящих друг от друга (по сравнению с Web Essentials 2.7, состоит в том, чтобы объединить все файлы в один большой файл бездействия в том порядке, в котором они указаны в bootstrap.less.

d) Так как шаг c - трудоемкая боль, я рекомендую сейчас компилировать файлы с загрузочным файлом с внешним компилятором. По крайней мере до тех пор, пока веб-Essentials не позволит вам установить точку входа и скомпилировать папку зависимых .less файлов в требуемом порядке.

Ответ 4

Теперь это стало намного проще и требует очень мало действий. Во-первых, я использую VS 2013, но шаги должны быть одинаковыми для VS 2012:

• Убедитесь, что Web Essentials установлена ​​правильно.
• В разделе TOOLS/Options/Web Essentials/LESS убедитесь, что Автокомпилировать зависимые файлы при сохранении True и Скомпилировать файлы при сохранении True.
• Если ваш проект веб-приложения в настоящее время использует предварительно скомпилированный пакет NuGet Bootstrap или если вы вручную добавили Bootstrap в свой проект, удалите его.
• Используя NuGet, добавьте пакет Bootstrap Less Source в проект веб-приложения.
• Добавьте новый файл bootstrap.less в папку ~/Content (MVC) вашего приложения.
• Удалите все содержимое этого файла, затем щелкните и перетащите файл ~/Содержание/bootstrap/bootstrap.less в этот файл. Это создаст запись @import "bootstrap/bootstrap"; в новом файле.
• Чтобы скомпилировать этот файл в файлы CSS, все, что вам нужно сделать, это сохранить файл (т.е. нажать CTRL-S или кнопку "Сохранить файл" ).
• Если вы внесете какие-либо изменения в файлы, все, что вам нужно сделать, это сохранить этот файл.

Выполнение этого способа позволит вам легко обновить пакет NuGet, когда доступна новая версия. Вы можете добавить любые менее переменные изменения после строки @import.

НАСЛАЖДАЙТЕСЬ!