Компилиране на .less до .css в Drupal-7 Bootstrap sub-theme

Drupal bootstrap

Модула 3.x изисква bootstrap-3+ source (current 3.1.1).

Описанието е за използване на Method 1: Bootstrap Source Files от документацията на модула.

Сваляме и разархивираме https://drupal.org/project/bootstrap в sites/all/themes.
Копираме sites/all/themes/bootstrap/bootstrap_subtheme в sites/all/themes/custom_bs. Сега в themes папката би трябвало да имате две теми - bootstrap и custom_bs (custom_bs е името на нашата суб-тема, може да изберете друго).

Сваляме от http://getbootstrap.com/getting-started/#download сорса (Download source) и разархивираме в нашата суб-тема custom_bs. Преименуваме на bootstrap. Така в нашата суб-тема трябва да имаме папка bootstrap със сорса от http://getbootstrap.com/getting-started/#download.

По подразбиране bootstrap използва less, но аз предпочитам да използвам sass. Затова в суб-темата си създавам папка sass и в нея създавам необходимите ми файлове .scss (които се компилират с compass). Документация на модула bootstrap за sass. Въпреки това е необходимо да копилираме съществуващите в суб-темата less до css. В резултат в css/style.css ще се компилира инициализиращия за темата css. Допълнителните .css, компилирани от .scss задължително се добавят в .info на нашата суб-тема след реда на който е style.css, но това е тема на друг пост.

lessc е компилатор за less написан на nodejs, затова:

Инсталираме nodejs (https://rtcamp.com/tutorials/nodejs/node-js-npm-install-ubuntu/)

apt-get install python-software-properties
apt-add-repository ppa:chris-lea/node.js
apt-get update
apt-get install nodejs

Инсталираме lessc.

npm install less -g

lessc - examples (http://lesscss.org/usage/#command-line-usage)

# compile bootstrap.less to bootstrap.css
$ lessc bootstrap.less bootstrap.css
 
# compile bootstrap.less to bootstrap.css and minify (compress) the result
$ lessc -x bootstrap.less bootstrap.css

Използване на компилатора за нашата суб-тема

От папка less в нашата суб-тема изпълнаваме

$ lessc style.less ../css/style.css

Ура! Имаме работеща bootstrap суб-тема.

Възможни проблеми

Ако в резултат на компилирането получите грешка подобна на

$ lessc style.less ../css/style.css
FileError: '../bootstrap/less/mixins.less' wasn't found in /media/ssd120/vhosts/drupal-7.dev2/sites/all/themes/custom_bs/less/bootstrap.less on line 3, column 1:
2 @import "variables.less"; // Modify this for custom colors, font-sizes, etc
3 @import "../bootstrap/less/mixins.less";
4

решението е да се замени variables.less в нашата суб-тема със същия файл от bootstrap/less която е в суб-темата. https://github.com/twbs/bootstrap/issues/12768

Category: