How do I compile a directory full of less css files to css?

Question

I have a directory full of less css files. What is the best way to compile them to normal css? (for deployment)

Id like to run a command as follows:

Answer 1

If you want compile multiple less files into multiple css files try this one-liner bash script:

for file in *.less; do lessc -x --yui-compress -O2 --strict-imports $file `basename $file`.css ; done

You will get a list of .less.css files after run the command.

PS: It addittionaly optimizes (-O2) at maximum, compress (-x) and minifies with YUI Compressor (--yui-compress) with strict import evaluation (--strict-imports).

EDITED: For new YUI Compressor versions skip -02 and --yui-compress deprecated, so:

for file in *.less; do lessc -x --strict-imports $file `basename $file`.css ; done

Answer 2

Just found an awesome npm module to do that ! :)

Install it:

$ npm install [-g] lessc-each

Run it:

$ lessc-each  ‹dir1›  ‹dir2›

Where ‹dir1› is the directory of Less files to compile, and ‹dir2› is the directory for output files. If ‹dir2› does not exist, it will automatically be created. Both directories must be relative to the current path of the command line.

Answer 3

If you are looking to compile all LESS files into a folder and subfolder tree in Windows. The following solution is using a batch file in Windows:

File compile-less.bat: @echo
cd ".\pages" for /r %%i in (*.less) do call lessc --clean-css "%%~i" "%%~dpni.min.css" cd ..

EDITED: All the less file in the folder and subfolders will be compiled. Tested in Windows 10 and 8.1

Answer 4

You can use the following bash one-liner to compile and all less files in a directory and its subdirectories into a single css file "combined.css":

$ find less_directory/ -name '*.less' -exec lessc {} \; > combined.css

Or minified for production:

$ find less_directory/ -name '*.less' -exec lessc -x {} \; > combined.css

Answer 5

While browsing through all other answers, none of them worked for me. I found a good solution to handle my situation in a combination of answers.

First, you compile all less files into 1 less file. This because it might throw errors (like the bootstrap one).

cat less_directory/* > less_directory/combined.less

Now that you have 1 less file in the less folder, you can compile that one the css without it causing any issues:

lessc less_directory/combined.less > css/style.css

After this, don't forget to throw away the combined.less, otherwise this will mess up the next compile.

rm -f less_directory/combined.less

You can automate this process by making it a batch script

Answer 6

Based shakaran's answer, but instead of .less.css files, it creates .css files (don't use less in the filename, well only in the extension that is):

for file in *.less; do lessc -x --strict-imports $file `basename $file | sed -e "s/less/css/"` ; done