( версия bootstrap'а 3.3.1) как настроить компиляцию less в css?

Question

[grishaaa]

Здравствуйте, я пользуюсь bootstrap 3.3.1 и хочу с помощью less изменять стили в bootstrap 3.3.1, но не знаю как мне настроить все это чтобы все работало. Расскажите пожалуйста все подробно как подключить less.

Answer 1

[Alex]

1. Создайте файл style.less, в котором вы импортируете необходимые бутстрап-файлы (пусть они лежат в отдельной папке, чтобы не путаться). Например:

@import "bootstrap/less/variables.less"
@import "bootstrap/less/mixins.less"
@import "bootstrap/less/normalize.less"
@import "bootstrap/less/mixins.less"
@import "bootstrap/less/buttons.less"

Список всех файлов вы можете увидеть в bootstrap.less. Если вам нужен весь бутстрап, вы можете просто этот bootstrap.less импортировать.

2. Пишите свои стили после импортов или в отдельном файле, и включите его в style.less с помощью импорта:

// Bootstrap
@import "bootstrap/less/variables.less"
...
@import "bootstrap/less/buttons.less"

// Project Styles
@import "project.less"

3. Скомпилируйте LESS в CSS с помощью, как уже посоветовали, npm-пакета less или утилиты Prepros. Подключайте итоговый CSS-файл к вашей странице.

Чтобы лучше понять LESS, можно пройти онлайн-курс Знакомство с LESS.

Comments

[grishaaa]

Вопрос, а что нужно будет подключить в файл html, я понял что файл styles.css нужно, а что ещё помимо этого файла

[Alex]

grishaaa, если вы подключаете styles.css, то больше ничего не нужно.

[grishaaa]

И ещё, в файле style.less я туда подключаю через import, bootstrap.less (это если я хочу использовать всё параметры), стили я буду писать в отдельном файле например в variables.less его я тоже подключаю в файл style.less так вить??? а переменные где мне писать в том же файле где и стили в variables.less????????

[grishaaa]

А через программу winLess, можно будет скомпилировать файл???

[Alex]

Да, ваш файл тоже нужно подключить через import в styles.less. Главное — написать переменные выше того места, где они будут использоваться. Если вы пишете стили в variables.less, то и переменные можно писать в самом верху этого файла.

[Alex]

grishaaa: Да, через winLess можно скомпилировать.

[grishaaa]

Благодарю вас за помощью, сам я никак не мог с этим разобраться, и ещё раз спасибо

[Alex]

grishaaa: Не забудьте отметить ответ как решение ;)

[grishaaa]

Я не знаю как это сделать. Я на этом сайте первый раз))

[grishaaa]

Всё, понял как

[grishaaa]

Новая проблемка появилась, возможно я что-то не так сделал, боюсь я в этом уверен, вообщем я подключил в файл стилей чистый файл под переменные и сам bootstrap.less на скриншоте видно joxi.ru/KAxeEBGhvGLLr8 и когда я что-то сохраняю у меня выбивает такую я на скриншоте обвёл красным цветом её

[Alex]

@grishaa, проблема в том, что путь до new_variables.less от вашего styles.less — это просто new_variables.less. Т.е. надо делать так:

@import "less/bootstrap.less";
@import "new_variables.less";

Answer 2

[azzaro]

npm install -g less
lessc styles.less > styles.css

Comments

[grishaaa]

Я только начал изучать bootstrap 3.3.1. Если не затруднит, можешь подробно расписать, что куда нужно подключать что бы потом можно было спокойно писать переменные в чистом файле variables.less и стили в styles.less и чтобы оно само компилировалось. Может знаешь какие-то статьи по этому поводу

[azzaro]

Если на стороне клиента(браузера), то вот www.lesscss.ru/#client-side-usage
Так же там есть и про использование на строне сервера!

[grishaaa]

Вот я нашёл сайт где верстают с использованием less habrahabr.ru/post/211032 и там было написано скачать исходник less в которой будет папка bootstrap и под этой папкой нужно будет создать два пустых файла я так понял это старая версия less была бо в новой версии нету папки bootstrap но все таки эти два файла я создал потом через программу winLess скомпилировал их в папку css вот скрин. joxi.ru/GrqMNjOTREwWrz. А теперь как мне подключить этот less к файлу html чтобы можно было верстать сайт с помощью bootstrap 3.3.1

[azzaro]

https://www.youtube.com/results?search_query=less+...