[ACCEPTED]-How do I compile a directory full of less css files to css?-less

Accepted answer
Score: 75

The way to do this is what bootstrap does 2 - have a file which imports all the others 1 and compile that.

@import "variables.less"; 
@import "mixins.less";
Score: 24

You can use the following bash one-liner 3 to compile and all less files in a directory 2 and its subdirectories into a single css 1 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
Score: 15

If you want compile multiple less files into multiple css files try this one-liner 6 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 5 files after run the command.

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

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

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

This bash script works for me:

find "$PWD" -name '*.less' | while read line; do
    REPLACE=`echo $line | sed "s|\.less|\.css|"`

    # echo "$line --> $REPLACE"
    (lessc "$line" "$REPLACE" &)
done

0

Score: 5

I made this VERY simple bash script to compile 1 all LESS files in a directory to CSS

#/bin/bash
echo "Compiling all LESS files to CSS"
for file in *.less
do
    FROM=$file
    TO=${file/.*/.css}
    echo "$FROM --> $TO"
    lessc $FROM $TO
done
Score: 4

I just made the script on top of @iloveitaly's 3 work:

#!/bin/bash
# file name: lesscdir

if [[ -z $1 || -z $2 ]];then
    echo 'both arguments are needed'
    exit
fi

find $1 -name '*.less' -printf '%P\n' | while read name; do
    FROM=$(echo $1'/'$name)
    TO=$(echo $2'/'$name | sed "s|\.less|\.css|")
    TO_DIRNAME=$(dirname $TO)
    if [ ! -e $TO_DIRNAME ];then
        mkdir -p $TO_DIRNAME
    fi
    echo 'Compiling' $FROM '->' $TO
    lessc $FROM $TO
done

and then:

$ chmod +x lesscdir
$ sudo ln -s $(readlink -f lesscdir) /usr/local/bin/

Although I like python the 2 best and solve most problems with it, it's 1 still very happy to use bash in linux environment.

Score: 3

I have written a hackish script that solves 1 the problem:

#!/usr/bin/env python


#This is responsible for "compiling" less.css files to regular css files for production. It also minifies the css at the same time. 

#Usage: give it a start directory as the first parameter and an end directory as the second parameter. It will recursivly run the appropriate command for all css files in the first subdirectory.


import os
import sys
import re
if len(sys.argv) < 3:
    sys.exit('ERROR: Too many paths!! No less css compiled')
if len(sys.argv) > 3:
    sys.exit('ERROR: Not enough paths!! No less css compiled')

start_dir=os.path.join(os.getcwd(),sys.argv[1])
end_dir=os.path.join(os.getcwd(),sys.argv[2])
pattern=r'\.css$'
pattern=re.compile(pattern)

files_compiled=0

def copy_files(start, end, add=''):
    global files_compiled
    try:
      os.mkdir(end)
    except:
      pass
    for folder in get_immediate_subdirectories(start):
      copy_files(os.path.join(start,folder), os.path.join(end+folder), add+folder+'/')
    for less in os.listdir(start):
      if pattern.search(less):
        os.system('lessc -x %s > %s'%(start+less,end+less))
        print add+less
        files_compiled=files_compiled+1

def get_immediate_subdirectories(dir):
    return [name for name in os.listdir(dir)
            if os.path.isdir(os.path.join(dir, name))]

Ideally there is a better solution.

Score: 2

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

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

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

Install 6 it:

$ npm install [-g] lessc-each

Run it:

$ lessc-each  ‹dir1›  ‹dir2›

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

Score: 1

Recently I've been experiencing issues with 7 running something like

lessc directory/*.less foo.css

Instead of taking 6 the different LESS's and outputting them 5 into foo.css it would modify the second 4 file in the list. This is not OK with me.

To 3 solve this problem, I made a new less frontend 2 called lessm.

You can check it out at https://github.com/jive/lessm.

The way 1 you'd use it is

lessm foo.less foo2.less ../bar/bazz.less -o output.css
Score: 1

If you are looking to compile all LESS files 5 into a folder and subfolder tree in Windows. The 4 following solution is using a batch file 3 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 2 less file in the folder and subfolders will 1 be compiled. Tested in Windows 10 and 8.1

Score: 0

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

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

cat less_directory/* > less_directory/combined.less

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

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

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

rm -f less_directory/combined.less

You can 2 automate this process by making it a batch 1 script

Score: 0

The way I compiled less files to the corresponding 5 css files in the current folder tree:

find ./ -name '*.less' -type f -exec lessc {} {}.css \; -exec rename -f 's/.less.css/.css/' {}.css \;

For 4 example, if you have main.less somewhere in the folder 3 tree, you will get main.css in the same folder.

But 2 it requires rename command to be installed. To 1 install it with help of Homebrew:

brew install rename

More Related questions