Question

I am having weird issues working with less files and Twitter Bootstrap:

I have already had a deep investigation but i am still facing the problems.

I have downloaded the last versions of less and Twitter Bootstrap and i have organized my files in this way:

bootstrap.less

/*!
 * Bootstrap v2.2.2
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */

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

// CSS Reset
@import "less/reset.less";

// Grid system and page structure
@import "less/scaffolding.less";
@import "less/grid.less";
@import "less/layouts.less";

// Base CSS
@import "less/type.less";

// Utility classes
@import "less/utilities.less"; // Has to be last to override when necessary

In my folder less i have put all the files

variables.less
mixins.less
reset.less
layouts.less
type.less
utilities.less
scaffolding.less
grid.less

I read that the problem can be caused if the files are encoded with a BOM. I switch from Sublime to Dreamweaver to save my index without BOM, but it did not work out.

The weird thing is that Less just compile some files but also tells me that few variables are undefined such as : @baseFontFamily , @baseFontSize, @gridColumnwidth, @gridGutterwidth, but these variables are set up in my variables.less and the files bootstrap.less and variables.less are loaded successfully.
I upload a print screen to explain better my case

What might be causing the problem?

Thanks for your patience and i hope you get the point of my issue

Answer 1

It looks like you’re loading the files independently. Instead of compiling less/*.less only compile less/bootstrap.less.