如何将充满 less css 文件的目录编译为 css？

Question

我有一个充满 less css 文件的目录。将它们编译为普通 css 的最佳方法是什么？ （用于部署）

我想运行如下命令：

lessc -r less/ css/

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

Answer 1

做到这一点的方法就是 bootstrap 所做的 - 有一个文件导入所有其他文件并编译它。

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

Answer 2

您可以使用以下 bash 单行代码将目录及其子目录中的所有 less 文件编译为单个 css 文件“combined.css”：

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

或缩小以用于生产：

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

Answer 3

如果您想将多个 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 压缩器 (--yui-compress) 具有严格的导入评估 (--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

我只是在 @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 7

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

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

基于 shakaran 的答案，但它不是 .less.css 文件，而是创建 .css 文件（不要在文件名中使用 less，仅在扩展名中使用 less）：

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

Answer 9

刚刚找到了一个很棒的 npm 模块 来做到这一点！ :)

安装它：

$ npm install [-g] lessc-each

运行它：

$ lessc-each  ‹dir1›  ‹dir2›

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

Answer 10

最近，我在运行类似的东西时遇到了问题，

lessc directory/*.less foo.css

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

为了解决这个问题，我制作了一个新的 less 前端，名为 lessm。

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

你使用它的方式是

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

Answer 11

如果您希望将所有 LESS 文件编译到 Windows 中的文件夹和子文件夹树中。
以下解决方案是在Windows中使用批处理文件：

文件compile-less.bat：
@echo
cd ".\pages"
对于 (*.less) 中的 /r %%i 请调用 lessc --clean-css "%%~i" "%%~dpni.min.css"
cd ..

已编辑： 文件夹及其子文件夹中的所有 less 文件将被编译。
在 Windows 10 和 8.1 中测试

Answer 12

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

首先，将所有 less 文件编译为 1 个 less 文件。这是因为它可能会引发错误（如引导程序错误）。

cat less_directory/* > less_directory/combined.less

现在 less 文件夹中有 1 个 less 文件，您可以编译该 css 而不会引起任何问题：

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

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

rm -f less_directory/combined.less

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

Answer 13

我将 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

Answer 14

这是理想的解决方案。

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

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

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

lessc combined.less > compiled.css