Hi folks.

I created a new bootstrap subtheme and configured it to use LESS. My .info file is:

core = 7.x
base theme = bootstrap

; Regions
regions[navigation] = 'Navigation'
regions[header] = 'Top Bar'
regions[highlighted] = 'Highlighted'
regions[help] = 'Help'
regions[content] = 'Content'
regions[sidebar_first] = 'Primary'
regions[sidebar_second] = 'Secondary'
regions[footer] = 'Footer'

; Stylesheets
;stylesheets[all][] = css/style.css
stylesheets[all][] = less/style.less

;**********************************
; METHOD 1: Bootstrap Source Files
;**********************************
;
; ; Scripts
; scripts[] = 'bootstrap/js/bootstrap-affix.js'
; scripts[] = 'bootstrap/js/bootstrap-alert.js'
; scripts[] = 'bootstrap/js/bootstrap-button.js'
; scripts[] = 'bootstrap/js/bootstrap-carousel.js'
; scripts[] = 'bootstrap/js/bootstrap-collapse.js'
; scripts[] = 'bootstrap/js/bootstrap-dropdown.js'
; scripts[] = 'bootstrap/js/bootstrap-modal.js'
; scripts[] = 'bootstrap/js/bootstrap-tooltip.js'
; scripts[] = 'bootstrap/js/bootstrap-popover.js'
; scripts[] = 'bootstrap/js/bootstrap-scrollspy.js'
; scripts[] = 'bootstrap/js/bootstrap-transition.js'
; scripts[] = 'bootstrap/js/bootstrap-typeahead.js'
scripts[] = js/masonry.pkgd.min.js
scripts[] = js/bootstrap_dlivre.js
;
; ; Settings inherited by base theme, uncomment to override.
; ;settings[toggle_name] = 0
; ;settings[toggle_search] = 1
; ; Disable the CDN as we are using our own source files.
; settings[cdn_bootstrap] = 0

;*************************
; METHOD 2: Bootstrap CDN
;*************************
;
; ; Settings inherited by base theme, uncomment to override.
; ;settings[toggle_name] = 0
; ;settings[toggle_search] = 1
; ;settings[cdn_bootstrap] = 1
; ;settings[cdn_bootstrap_version] = 2.3.2

But I got various 404 errors:

http://i.imgur.com/LaN7vAZ.png

In my compiled CSS file I found several references to less files:

@import "../bootstrap/less/mixins.less";
@import "../bootstrap/less/reset.less";
@import "../bootstrap/less/scaffolding.less";
@import "../bootstrap/less/grid.less";
@import "../bootstrap/less/layouts.less";
@import "../bootstrap/less/type.less";
@import "../bootstrap/less/code.less";
@import "../bootstrap/less/forms.less";
@import "../bootstrap/less/tables.less";
@import "../bootstrap/less/sprites.less";
@import "../bootstrap/less/dropdowns.less";
@import "../bootstrap/less/wells.less";
@import "../bootstrap/less/component-animations.less";
@import "../bootstrap/less/close.less";
@import "../bootstrap/less/buttons.less";
@import "../bootstrap/less/button-groups.less";
@import "../bootstrap/less/alerts.less";
@import "../bootstrap/less/navs.less";
@import "../bootstrap/less/navbar.less";
@import "../bootstrap/less/breadcrumbs.less";
@import "../bootstrap/less/pagination.less";
@import "../bootstrap/less/pager.less";
@import "../bootstrap/less/modals.less";
@import "../bootstrap/less/tooltip.less";
@import "../bootstrap/less/popovers.less";
@import "../bootstrap/less/thumbnails.less";
@import "../bootstrap/less/media.less";
@import "../bootstrap/less/labels-badges.less";
@import "../bootstrap/less/progress-bars.less";
@import "../bootstrap/less/accordion.less";
@import "../bootstrap/less/carousel.less";
@import "../bootstrap/less/hero-unit.less";
@import "../bootstrap/less/utilities.less";
@import "../bootstrap/less/responsive-utilities.less";
@import "../bootstrap/less/responsive-1200px-min.less";
@import "../bootstrap/less/responsive-768px-979px.less";
@import "../bootstrap/less/responsive-767px-max.less";
@import "../bootstrap/less/responsive-navbar.less";

Thank you all, and sorry the english!

CommentFileSizeAuthor
#3 less.png5.47 KBMarcus VBP
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

shelane’s picture

The repo for Bootstrap has moved. You can find the full files for each release here: https://github.com/twbs/bootstrap/releases where the less files will be in that directory.

markhalliwell’s picture

Component: Code » Documentation
Category: bug » support
Status: Active » Postponed (maintainer needs more info)

@shelane, no that is the Framework repo. The errors he's having here are related to the LESS CSS Pre-compiler module.

@Marcus VBP, it sounds like you don't have LESS installed properly (ie: probably missing the LessPHP lib). Please double check your installation of the LESS module.

Marcus VBP’s picture

FileSize
5.47 KB

Hi Mark, thank you for the comment.

This is a screenshot from my status report page.

gusans’s picture

hi all, same problem here.

have LESS module (7.x-3.0) installed and activated with lessphp 0.4.0 on my libraries directory.
created a sub-theme from bootstrap 7.x-3.0-rc1 and activated less/style.less on my theme info file.

then, when i modify my variables.less file, can't see any changes on the styles of the page (cleared all caches and have developer mode activated on less configuration).

my drupal logs is full of 'page not found' errors, like this: http://imageshack.us/photo/my-images/69/96zx.png/

tried to browse to the path given in the error, and only have the file style.XcVzbo5GbrB4v7QVES377fts6uudS0o0YbaMpBamvPg.css with same @import lines at the beggining as Marcus VBP.

i'm new to bootstrap and less, and can't figure out what is going on and how to solve this.

festerm’s picture

Version: 7.x-2.1 » 7.x-3.0-rc1
Component: Documentation » Code
Category: support » bug
Status: Postponed (maintainer needs more info) » Needs work

Same issue here.

I did a workaround. Not very nice but effective.

If you check the bootstrap.less file inside the sub-theme folder you will see a lot of imports:

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "../bootstrap/less/mixins.less";

// Reset
@import "../bootstrap/less/normalize.less";
@import "../bootstrap/less/print.less";....

Except for the "variable.less" @import statement, all other @imports are pointing to a inexistent bootstrap folder inside the sub-theme.
So my nobrain workaround was download the files from http://getbootstrap.com/ and create this folder with the LESS folder inside it to fullfill the sub-theme's expectations.

markhalliwell’s picture

Component: Code » Documentation
Category: bug » support
Status: Needs work » Postponed (maintainer needs more info)

all other @imports are pointing to a inexistent bootstrap folder inside the sub-theme

From the Sub-theme starter kit documentation:

Method 1: Bootstrap Source Files

Download and extract the Bootstrap 2.3.2 source into your new sub-theme. After it has been extracted, the folder should read bootstrap. If for whatever reason you have an additional bootstrap folder wrapping the the bootstrap folder (like: bootstrap/bootstrap), remove the wrapping bootstrap folder. You will not need to touch these files again. This allows the framework to be updated in the future.

In the sub-theme's variables.less file, the beginning of all those imports is: ../, which is the parent directory. In this case, it would be the base sub-theme folder, not the less folder.

There is also a difference in downloading the Bootstrap framework's source and it's compiled release. Using the LESS module or even a local LESS preprocessor will require the source files: the ones ending in .less.

festerm’s picture

Status: Postponed (maintainer needs more info) » Closed (works as designed)

Great!
So my workaround was fine. :-)

gouthamlabs’s picture

Any detailed workaround for this ?

N. Gowthaman