How to properly use the @import option in LESS?

Question

css

I've been typing in less for more than half a year, periodically trying to split the main file main.less into fragments like variables.less, reset.less, functions.less, header.less, etc. for convenience, but every time the compiler (I used both Simpless and Winless) swear at errors that I do not understand.
If I merge everything into one file, then everything compiles without problems. So I'm still typing everything into one bulky file.
I would like to understand what I'm doing wrong.
I use the following structure in main.less (it is located in the less folder and compiles to /css/main.css)

@import "variables";
@import "functions";
@import "reset";
...

Answer 1

There is a solution!
By iterating through styles in functions, I found that he did not like the definition:

background: url(@sprite_border) 0 0 repeat-y;

rewrote these pieces taking into account work with strings

background: url('@{sprite_border}') 0 0 repeat-y;

and voila - everything compiles :)
But it's still not clear - why there was no abuse when this piece of code was directly in main.less

Answer 2

Have you forgotten the extension of the imported files?

@import "variables.less";

Answer 3

See how you have set the path to search for imported files.
In the documentation, there is an example:

var parser = new(less.Parser)({
    paths: ['.', './lib'], // указывает пути поиска для директив @import
    filename: 'style.less' // указывает имя файла, для улучшения сообщений об ошибках
});

...

Simply put, you may not have a directory in "paths" that contains your files.
If you are using the command line to compile, see the documentation