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

【问题标题】：How do I compile a directory full of less css files to css?如何将一个包含较少 css 文件的目录编译为 css？
【发布时间】：2011-08-07 03:56:30
【问题描述】：

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

我想运行如下命令：

lessc -r less/ css/

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

【问题讨论】：

在windows上你可以使用winless ;)
在主 css 文件上使用 @import 将它们一起导入并使用 Prepros App 可以编译 less、sass、stylus、jade、haml 和 markdown 并通过实时浏览器重新加载。
使用防护。 github.com/mloberg/guard-less（这个 fork 包含一个最新的 gem 依赖版本）
如果有人希望将所有 LESS 文件编译到 Windows 中的文件夹树中。下面是我在 WIndows 中使用批处理文件的解决方案： File compile-less.bat: @echo cd ".\pages" for /r %%i in (*.less) do call lessc --clean-css "%%~i" "%%~dpni.min.css" cd .. 文件夹 pages 及其子文件夹中的所有 less 文件都将被编译。

标签： css less

【解决方案1】：

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

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

【讨论】：

最初的问题（以及我刚刚尝试做的事情）讨论了如何监控整个目录并生成多个 .less 文件。因此，虽然这个答案没有明确回答（而且 lessc 工具似乎也没有处理它）我放弃并使用这种方法将所有内容构建到 all.css 文件中，现在同意这是最好的选择： - )

【解决方案2】：

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

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

或为生产而缩小：

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

【讨论】：

【解决方案3】：

如果你想将多个少文件编译成多个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 Compressor 缩小 (--yui-compress) 具有严格的导入评估 (--strict-imports)。

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

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

【讨论】：

这是我一直在寻找的答案——尽管对于现代版本的 lessc -O2 和 --yui-compress 都已弃用，因此您应该跳过它们。
我是唯一一个basename 不剥夺.less 的人吗？我用basename $file | cut -f 1 -d '.'替换了basename $file。
其实我好像只要把basename $file换成basename $file .less就好了。我会编辑答案；但我对此没有足够的信心。有人可以确认这不仅仅是我，然后编辑答案，如果不仅仅是我吗？

【解决方案4】：

这个 bash 脚本适合我：

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

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

【讨论】：

【解决方案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

【讨论】：

非常有用的脚本，这对我帮助很大！谢谢你。对于其他人，只需在与 .less 文件相同的目录中运行此脚本，它就会将每个文件转换为单独的 .css 文件。正是我需要的。节省大量时间！我所做的是输入“vi compileless.sh”，并将他的脚本复制到那里，然后您只需通过控制台将其作为 sh compileless 运行。如果你不熟悉 VIM 编辑器，使用 'i' 插入他的文本，然后按 escape 键，然后按 ':' 键和 s，按 enter。这将保存，然后 :q 退出。

【解决方案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还是很开心的。

【讨论】：

最佳答案在这里 :)

【解决方案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))]

最好有更好的解决方案。

【讨论】：

【解决方案8】：

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

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

【讨论】：

【解决方案9】：

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

安装它：

$ npm install [-g] lessc-each

运行它：

$ lessc-each  ‹dir1›  ‹dir2›

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

【讨论】：

【解决方案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

【讨论】：

【解决方案11】：

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

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

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

【讨论】：

【解决方案12】：

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

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

cat less_directory/* > less_directory/combined.less

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

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

在这之后，不要忘记扔掉combined.less，否则会弄乱下一次编译。

rm -f less_directory/combined.less

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

【讨论】：

【解决方案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

【讨论】：

【解决方案14】：

这是理想的解决方案。

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

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

第 2 步：编译合并后的 .less 文件。

lessc combined.less > compiled.css

【讨论】：