Error when using variables in different less files?

[lvarayut]

Let's say I separated less files into many less files to be easier to organize. Here is my repository:

/reset.less /variables.less /mixins.less /main.less /styles.less

The styles.less is just importing the other files:

@import "reset.less"; @import "mixins.less"; @import "variables.less"; @import "main.less";

However, when I add some codes into main.less and use the @line-color which is defined in the variables.less. It shows Name Error: variable @line-color is undefined and I cannot compile it- I use PHPStorm with less plugin. Could you pleas suggest me?

[dannymachal]

can you post your variables.less?

[lvarayut]

I have just two following lines in the variables.less.

@line-color: #cccccc; @link-color: #08c;

[cloe-perrotin]

I have the same problems and I find no answer so far has functioned.

1st track: UTF8 to be without BOM = no results 2nd track: provide a file path like this: / less / variables.less = no results currently no idea on the net will remove the error ...

[acdvorak]

I'm unable to reproduce the issue in IntelliJ IDEA 13 Ultimate (IU-133.471).

Which LESS file does the error message say is causing the problem?

Did you configure your LESS Profile (under Project Settings) to ONLY compile styles.less? Or is it trying to compile all LESS files (which is the default behavior if you don't explicitly set an include/exclude filter in the settings)?

[cloe-perrotin]

Hello,

the file that shows me this error message: variables.less

Yes I have less to configure it compiles only styles.less file min. I compile with less app 'for mac.

I usually get there for other projects with my old computer windows mac but then impossible for the moment ... because of this error I do not know if it's related but it does not work.

---

Bonjour,

le fichier qui m'affiche ce message d'erreur est : variables.less

Oui j'ai configurer less pour qu'il compile seulement le fichier styles.less en min. Je compile avec less app' pour mac.

D'habitude j'y arrive pour d'autres projets avec mon ancien ordi windows mais là sous mac impossible pour le moment... à cause de ce message d'erreur je ne sais pas si c'est lié mais ça ne fonctionne pas.

[acdvorak]

@cloe-perrotin:

Please try updating to the latest version of the plugin (2.6.8).

If that does not work, could you please send me a .zip file containing all of your .less files and directories? If that is not possible (e.g., they are private), could you please create some small example .less files that reproduce the issue?

Thanks!

[istvanpuskas]

Hi,

I have a similar issue (phpstorm 8.0.3, plug-in version 2.6.9). I'm trying to compile style.less. First few lines of the file:

@bootstrap-path: "../../bower_components/bootstrap/less";

// Core variables and mixins
@import "mixins.less";
@import "variables.less";

mixin.less

@import "@{bootstrap-path}/mixins.less";

Error message:

12:02:52 PM LESS CSS Compiler Error mixins.less: Name Error: variable @bootstrap-path is undefined (line 23, column 8) near // This variable must be declared here rather // than in an included file. This is the path

[lazurey]

Hi @istvanpuskas I met the same error when I try to define a variable in vars.less

@path: "customize";

@colorBase: #f00;

and use in main.less

@import "vars.less";
@import "@{path}/whatever.less";

.base {
  color: @colorBase;
}

I get the variable undefined error for @path, but any other variable, such as @colorBase, I defined in vars.less, I can use them in normal CSS code.

Any solutions for this?

Thanks,

[dsozzi]

+1

same error as above. Webstorm on Mac

[lazurey]

@kiwi1342 Maybe check your less version.

I solved it by upgrade less from 1.x to 2.x, and everything is good now.

[ljorgensen4]

Hi all. Have a weird issue in IntelliJ 14 Ultimate Edition with "LESS CSS Compiler" version 2.6.9. I have a "main" less files that imports a number of less files. One of these files contains a definition of all variables. When changing a less file that contains a variable the console outputs this: "Process finished with exit code 1" The status line however shows the compilation process and produces a popup saying the compilation is complete. The css file produced is ok so guess it is some kind of less support error or ??? Can anyone shed some light on this? Thanks in advance.

[dsozzi]

@lazurey thx but I already have version 2.5.1 :(

[zagabona]

Having the same errors as mentionned in the OP.

• MacOSX 10.11.1 (El Capitan)
• PHPStorm 10.0.2
• Less CSS Compiler 2.6.9

When I only set the path to the file wilh all @import-lines in the field "Include files by path", the error is gone, but it would no longer compile the css to its proper css-folder (as configured). "Track only root files" is enabled in the settings of the File Watcher.

I do think I know what the problem is. I'm working on files other than style.less (since the latter is only used for compiling and only consists of "@import" lines), so style.less is never being modified. As a result it won't compile automatically with every change I make (in another less file) either. The solution would be that if I modify a less file, that PHPstorm automatically compiles style.less (without touching it) instead of trying to do that with the file that was modified. Is there a way this can be configured please?

Edit: I could solve it by doing the following:

1. Open the Preferences dialogue and go to Tools > File Watchers > Less (configure)
   • Check "track only root files"
   • Change the "Output paths to refresh" to ../css/$FileNameWithoutExtension$.css (added "../css/" in front - depending on what folder you'd like to write the css files into)
   • At this point you may want to check if it already does the job to your liking. If it doesn't, carry on to step 2…
2. In Other Settings > LESS Profiles > (Your profile) (configure)
   • Define "LESS source directory": /Users/macuser/htdocs/MySite/sites/all/themes/mytheme/less (depending on which folder contains the .less files)
   • Define "Include file by path": /Users/macuser/htdocs/MySite/sites/all/themes/mytheme/less/style.less (file name depending on which .less file compiles the other .less files)
   • Add "CSS output directory" by selecting the folder you wish to write the (minified) CSS files
   • Enable Compress CSS output if desired

Notice: If Compress CSS output is enabled, this means that the code will be compressed everytime you right-click a .less-file and hit "Compile to CSS". By default the output will not be compressed with every modification you make to the .less-file. If you do want to compress the CSS straight away,

• Install less-plugin-clean-css using the following command in Terminal: sudo npm install -g less-plugin-clean-css
• Next, go to Tools > File Watchers > Less (configure), and change the "Arguments" to --clean-css --no-color $FileName$ (added "--clean-css" in front). Now it will compile your CSS automatically while you're coding. You'll no longer need to compile manuall

[thiagocanudo]

This happen if you paste the variables names. You need write variables names. Writing the variables names resolved my problem...

[jcchrrr]

@thiagocanudo tips works for me in VsCode Thx