如何编译一个目录充满了较less的CSS文件到CSS?

我有一个目录充满了较less的CSS文件。 什么是最好的方式来编译他们正常的CSS? (用于部署)

我想运行一个命令如下:

lessc -r less/ css/ 

lessc是less编译器(通过节点包pipe理器安装)

这样做的方式是什么引导程序 – 有一个文件,导入所有其他和编译。

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

您可以使用下面的bash单行程序将一个目录及其子目录中的所有较less文件编译成一个单独的css文件“combined.css”:

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

或者为了生产而缩小:

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

如果你想编译多个较less的文件多个CSS文件尝试这个单行的bash脚本:

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

运行该命令后,您将获得.less.css文件的列表。

PS:通过严格的导入评估( 严格导入),最大限度地优化( -O2 ),压缩( -x )并通过YUI压缩器 ( –ui-compress )进行压缩

编辑 :对于新的YUI压缩机版本跳过-02和 – yui-compress弃用,所以:

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

这个bash脚本适用于我:

 find "$PWD" -name '*.less' | while read line; do REPLACE=`echo $line | sed "s|\.less|\.css|"` # echo "$line --> $REPLACE" (lessc "$line" "$REPLACE" &) done 

我做了这个非常简单的bash脚本来编译一个目录中的所有LESS文件到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 

我写了一个解决问题的黑客脚本:

 #!/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))] 

理想情况下有一个更好的解决scheme。

我刚刚在@ iloveitaly的工作之上做了脚本:

 #!/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 

接着:

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

尽pipe我最喜欢python并且解决了大多数的问题,但是在linux环境下使用bash仍然很开心。

最近我遇到了像运行类似的问题

 lessc directory/*.less foo.css 

而不是采取不同的LESS和输出到foo.css它将修改列表中的第二个文件。 这对我不好。

为了解决这个问题,我做了一个新的less less前端。

你可以在https://github.com/jive/lessm查看。;

你使用它的方式是

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

基于shakaran的答案,而不是.less.css文件,它会创build.css文件(不要在文件名中使用较less,只在扩展名中使用):

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

浏览所有其他答案时,他们都没有为我工作。 我find了一个很好的解决scheme来处理我的情况,在答案的组合。

首先,将所有较less的文件编译成less一个文件。 这是因为它可能会引发错误(如bootstrap)。

 cat less_directory/* > less_directory/combined.less 

现在你在less文件夹中只有一个文件,你可以编译一个没有导致任何问题的CSS:

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

在此之后,不要忘记扔掉这个联合,否则这会弄乱下一个编译。

 rm -f less_directory/combined.less 

您可以通过使其成为批处理脚本来自动执行此过程

我编译less量文件到当前文件夹树中相应的css文件的方式:

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

例如,如果您在文件夹树中的某处有main.less ,您将在同一个文件夹中获得main.css

但是它需要安装rename命令。 在Homebrew的帮助下安装它:

 brew install rename 

刚刚find一个真棒npm模块来做到这一点! 🙂

安装它:

 $ npm install [-g] lessc-each 

运行:

 $ lessc-each ‹dir1› ‹dir2› 

其中<dir1>是要编译的Less文件的目录, <dir2>是输出文件的目录。 如果<dir2>不存在,则会自动创build。 这两个目录必须相对于命令行的当前path。

这是理想的解决scheme。

第1步:创build一个新的.less文件,其中包含每个现有.less文件的@import语句。

 find less_directory/ -name '*.less' -exec echo "@import \"{}\";" \; > combined.less 

第2步:编译组合的.less文件。

 lessc combined.less > compiled.css