CODEWITHSUNDEEP
cssvariablescompilationlessnpm
MrShmee
MrShmee

Reputation: 175

.less file fails to compile when using variables from another file

I have a .less file that contains a few definitions that make use of variables that are defined in another file.

Example:

body {
    font-family: @baseFontFamily;
    font-size: @baseFontSize;
    color: @textColor;
}

Initially, IntelliJ showed the variables as undefined. When I compiled with Lessc I'd get an error that read as such:

TypeError: Cannot call method 'charAt' of undefined at getLocation (C:\PATH\npm\node_modules\less\lib\less\parser.js:212:34) at new LessError (C:\PATH\npm\node_modules\less\lib\less\parser.js:221:19) at Object.toCSS (C:\PATH\npm\node_modules\less\lib\less\parser.js:385:31) at C:\PATH\npm\node_modules\less\bin\lessc:107:28 at C:\PATH\npm\node_modules\less\lib\less\parser.js:434:40 at C:\PATH\npm\node_modules\less\lib\less\parser.js:94:48 at C:\PATH\npm\node_modules\less\lib\less\index.js:116:17 at C:\PATH\npm\node_modules\less\lib\less\parser.js:434:40 at C:\PATH\npm\node_modules\less\lib\less\parser.js:94:48 at C:\PATH\npm\node_modules\less\lib\less\index.js:116:17

After doing a little reading I determined that this means there is an error somewhere up in my code. I naturally assumed it was due to the variable definition not working. I commented the lines with variables out, and lessc would compile my project fine.

However, even after I added the appropriate @import so that the variables were defined (and the lines with variables uncommented), I again received the compile-time error. Is there something I'm missing?

Upvotes: 4

Views: 4237

Answers (3)

MrShmee
MrShmee

Reputation: 175

Issue discovered. There was 'config.less' file in the parent and child folders. Moving the contents of the config.less from the child to the parent version solved the issues I was experiencing.

Upvotes: 4

MrShmee
MrShmee

Reputation: 175

I discovered the answer. I tried compiling just the one file (and not the suite of .less files). NPM showed that it was having issues locating one of the Mixins used. Upon @import-ing the proper file, the suite now compiles fine.

Here is the lesson: - if you are having issues with one of your .less files, try compiling it by itself. NPM will give you more detail about the error than just a general stack trace.

Upvotes: 2

Pevara
Pevara

Reputation: 14308

I get these errors as well when i work like this, but the actual compiled css works just fine. I do compile my less on development and only put the css on runtime though, as i do not want styles to be depending on javascript...

Upvotes: 0

Related Questions