How do LESS files work in Meteor?

Question

I'm confused about how LESS files work. Can I just create a bunch of them and they're just magically included? How do I know they're being included in the right cascading order? What is the significance of the .import.less suffix? I have these files:

client/stylesheets/variables.import.less

@headline-font: 'Khula', Helvetica, Arial, sans-serif;

client/stylesheets/main.less

h1 {
  font-family: @headline-font;
}

And Meteor does not like this:

While building the application:
client/stylesheets/main.less:14:16: Less compiler error: variable
@headline-font is undefined

Answer 1

The default Less compiler for Meteor compiles every file with the .less extension into a single CSS file. Partial files with variables and mixins should not be compile into a single file, but imported into your project only.

The .import.less suffix prevents your files from being compiled into a CSS files, but can imported into your other Less files still.

See also: Overide bootstrap base class attributes in less and meteor

In your situation you will possible need the following line of code in your main.less file:

@import "client/stylesheets/variables.import.less"

Answer 2

You need to include variables.import.less in main.less.

You may find this answer useful: https://stackoverflow.com/a/23527787/3624916