Question

我的目录中包含较少的css文件。将它们编译为普通css的最佳方法是什么？（用于部署）

我想按如下方式运行命令：

lessc -r less/ css/

其中lessc是较少的编译器（通过节点包管理器安装）

Answer 1

执行此操作的方法是引导程序的作用 - 有一个文件可以导入所有其他文件并进行编译。

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

Answer 2

您可以使用以下bash one-liner将目录及其子目录中的所有较少文件编译为单个css文件“combined.css”：

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

或缩小生产：

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

Answer 3

如果您想将多个文件编译到多个css文件中，请尝试使用这个单行bash脚本：

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

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

PS：addittionaly最多优化（ -O2 ），压缩（ -x ）并用YUI Compressor缩小（ - yui-压缩）具有严格的导入评估（ - strict-imports ）。

已编辑：对于新的YUI Compressor版本，请跳过-02和--yui-compress弃用，因此：

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

Answer 4

这个bash脚本适合我：

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

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

Answer 5

我制作了非常简单的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

Answer 6

我写了一个解决问题的hackish脚本：

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

理想情况下，有一个更好的解决方案。

Answer 7

我刚刚在@ 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/

虽然我最喜欢python并且用它来解决大多数问题，但是仍然很乐意在linux环境中使用bash。

Answer 8

最近我遇到了运行类似

的问题

lessc directory/*.less foo.css

它不会取出不同的LESS并将它们输出到foo.css中，而是修改列表中的第二个文件。这对我来说不行。

为了解决这个问题，我创建了一个名为lessm的新的前端。

您可以在https://github.com/jive/lessm处查看。

你使用它的方式是

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

Answer 9

根据shakaran的回答，但不是.less.css文件，而是创建.css文件（不要在文件名中使用less，只在扩展名中使用）：

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

Answer 10

刚刚发现了一个很棒的npm module来做到这一点！：）

安装它：

$ npm install [-g] lessc-each

运行它：

$ lessc-each  ‹dir1›  ‹dir2›

其中是要编译的Less文件的目录，是输出文件的目录。如果不存在，则会自动创建。两个目录必须相对于命令行的当前路径。

Answer 11

在浏览所有其他答案时，它们都没有为我工作。我找到了一个很好的解决方案来处理我的情况，结合答案。

首先，将所有较少的文件编译为1个较少的文件。这是因为它可能会抛出错误（比如bootstrap）。

cat less_directory/* > less_directory/combined.less

既然你在less文件夹中少了1个文件，你就可以编译那个css，而不会导致任何问题：

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

在此之后，不要忘记扔掉合并的，否则这会搞砸下一次编译。

rm -f less_directory/combined.less

您可以将此过程自动化为批处理脚本

Answer 12

我将较少的文件编译到当前文件夹树中相应的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

Answer 13

如果要在Windows中将所有LESS文件编译到一个文件夹和子文件夹树中。以下解决方案在Windows中使用批处理文件：

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

已编辑：该文件夹和子文件夹中的所有次要文件都会被编译。在Windows 10和8.1中进行了测试

Answer 14

这是理想的解决方案。

步骤1：创建一个新的.less文件，其中包含每个现有.less文件的@import语句。

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

步骤2：编译组合的.less文件。

lessc combined.less > compiled.css

如何将一个包含较少css文件的目录编译为css？

14 个答案: