LESS CSS on Windows
I think I found the problem. In my first installation I installed to C:\Program Files\Ruby
so I uninstalled and tried the default 'C:\Ruby' install path. Seems to fix the problem and it now works correctly. Thanks.
How to install and run lessc on top of node.js and Windows?
In a console, run the following:
node C:\Users\Me\AppData\Roaming\npm\node_modules\less\bin\lessc style.less > style.css
style.less
must be in the console's directory.
LESS Client for Windows
Have you tried using it client-side? All the compiling happens with javascript so you don't need a plugin or client at all. Using LESS client-side is great for local development or production if you're ok with depending on javascript.
If you're not comfortable with depending on javascript in a production environment you could:
- set up a node.js server to handle the compiling
- compile into CSS via the command line or similar only before pushing to production
Both these options allow you to develop locally without the need for any extra software.
Netbeans Less CSS (Node.js preprocessor) not recognizing Mixin
The reason as to "why" this problem was happening came from @seven-phases-max 's upvoted comment. Quoting from him:
This is because you set Netbeans to compile each less file on save. So when you hit save it tries to compile just doc-that-calls-mixin-function.less and the error is expected since no mixins/animation.less is imported there
@seven-phases-max suggest the following:
You need to configure it [Netbeans] to recompile only styles.less
Alright, I looked for sites that could help me configure Netbeans to only recompile main file when I change any other Less file. I found nothing, only bugs and people wanting exactly the same. So there are two solutions to this:
Solution 1 (not the one I applied)
First solution is obvious (no I don't mean give up on Netbeans); just add @import file_of_mixin_you_need
on the Less file where you call the mixin. In my case:
doc-that-calls-mixin-function.less
@import 'mixins.less';
.rounded {
.RoundBorders(4px);
}
If it were a small project with few files, I'd get over it and just do it this way. Should you do it this way for a big project, or medium sized one? My answer is "heck no". Why? Well, it's @import boilerplate
all over the place. How are you going to keep track of that?
Solution 2 (the one I am currently using)
This solution can only be carried out if you have Node.js installed in your system. Installing for Windows is a breeze, just go to Node.js site, and download the windows installer. Once downloaded in your console you will have access to "npm" command, use it to install lessc: npm install -g less
. Now you are ready.
Well, in Netbeans I completely removed the "compile on save" deal. I opened my command windows and navigated to my Netbeans project's path, all the way to where my less files are. I leave that command window open and carry along. The moment I have finished saving and doing whatever I need in Netbeans IDE, here are the steps to follow:
- Delete file ../css/style.css (Otherwise it won´t get overwritten on less compile)
Go to your command window (remember that you must be in your less folder) and carry out this command:
lessc style.less > ...\css\style.css
Done
If you have any errors, the command window will show them. I chose this solution cause it avoids the @import boilerplate
on all my files. Also, I now longer have to worry about .gitignore"ing" the files that Netbeans was compiling (for every less file I had, it generated a css file).
That's it. Hope it helps anyone else.
Compile multiple LESS files using the Windows Command Prompt
As seven-phases-max stated, less is a command line script in windows and does not return back to the original script.
The work-around is to use call
. The script ended up being:
echo Compiling CSS...
pause
call lessc -x C:\path_to_file\file1.less ..\output\file1.css
pause
call lessc -x C:\path_to_file\file2.less ..\output\file2.css
pause
All credit goes to seven-phases-max, i just wanted to clarify the correct method as it may help others in the future.
Related Topics
Set Width of Ng-Multiselect-Dropdown
How to Center Align a Child Div Inside a Parent Div with CSS
CSS Not Working on Django Password Form Field
Move Multiple Backgrounds Infinitely Using CSS
What Is Better: CSS Media Queries or Jquery Mobile
Checkboxes with Font Awesome 5 Icons
Impossible to Add Pseudo Element to Canvases
Using CSS to Create Custom Borders with Just the Corners Showing
Twitter Bootstrap: White Space on Left and Right Side in Smaller Screen Widths
Nth-Child to Alternate by 2 Rows
Sass/Scss @Extend Rule Selectors
Custom Checkboxes Failing on Firefox
CSS Difference Between 0 and 0Em
Setting CSS Style Attributes with Thymeleaf
In ASP.NET.Mvc, What Is the Correct Way to Reference Images Inside of CSS