Search code examples
twitter-bootstrapcompiler-errorsless

Less does not compile files with Twitter Bootstrap

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 caseenter image description here

What might be causing the problem?

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

Solution

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