如何将一个包含多个less css文件的目录编译成css文件？

Question

我有一个包含许多Less CSS文件的目录。最好的方法是什么，将它们编译成常规的CSS（用于部署）？

我想要运行以下命令：

lessc -r less/ css/

lessc是一个less编译器（通过node包管理器安装）。

- ocoutts

---

在Windows上，你可以使用WinLess ;) - AgelessEssence

在主CSS文件中使用@import将它们一起导入，并使用Prepros App实时编译less、sass、stylus、jade、haml和markdown，并进行浏览器自动刷新。 - Subash Pathak

使用Guard。https://github.com/mloberg/guard-less（此分支包含最新的gem依赖版本） - elado

如果有人想把所有的LESS文件编译成一个文件夹树形结构，请使用以下Windows批处理文件解决方案：文件compile-less.bat：@echo cd ".\pages" for /r %%i in (*.less) do call lessc --clean-css "%%~i" "%%~dpni.min.css" cd ..文件夹“pages”中及其子文件夹中的所有less文件都将被编译。 - DAme

Answer 1

这样做的方法就像Bootstrap一样-有一个导入所有其他文件并编译它们的文件。

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

- Damian

---

原问题（以及我刚刚尝试做的）讨论如何监控整个目录并生成多个 .less 文件。虽然这个回答没有明确回答这个问题（lessc 工具似乎也处理不了），但我放弃了，使用了这种方法将所有内容都构建到一个 all.css 文件中，现���同意这是最好的选择 :-) - Alex York

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

- Dan Noble

Answer 3

如果您想将多个less文件编译成多个css文件，请尝试这个一行的bash脚本：

如果你想将多个 less 文件 编译成 多个 css 文件，可以尝试这个一行的 bash 脚本：

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

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

注：它还会使用最大优化选项（-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

- shakaran

---

这就是我一直在寻找的答案 - 尽管对于现代版本的lessc，-O2和--yui-compress都已经被弃用，所以你应该跳过它们。 - Zack

我是唯一一个使用 basename 无法去除 .less 的人吗？我用 basename $file 替换成了 basename $file | cut -f 1 -d '.'。 - MuffinTheMan

实际上，似乎我只需要用 basename $file .less 替换 basename $file。我想编辑答案，但我对此不太自信。有人能确认这不仅仅是我吗？如果不是，可以编辑答案吗？ - MuffinTheMan

这不仅仅是你，@MuffinTheMan。 - Eran Goldin

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

- iloveitaly

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

- Sam Stern

---

非常有用的脚本，这让我受益匪浅！谢谢。对于其他人，只需在与您的.less文件相同的目录中运行此脚本，它将把每个文件转换为单独的.css文件。正是我需要的。节省了大量时间！我所做的是输入“vi compileless.sh”，然后将他的脚本复制到其中，并通过控制台运行sh compileless即可。如果您不熟悉VIM编辑器，请使用“i”插入他的文本，然后按esc键，再按“：”键和s，按回车键。这将保存，然后输入“：q”退出。 - Joseph Astrahan

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也非常愉快。

- Reorx

---

这里有最佳答案 :) - Eduard Luca

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))]

理想情况下，应该有更好的解决方案。

- ocoutts

Answer 8

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

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

- Paul-Armand Verhaegen

Answer 9

我发现了一个很棒的npm模块lessc-each，可以帮助你实现这个功能！:)

安装它：

$ npm install [-g] lessc-each

运行它：

$ lessc-each  ‹dir1›  ‹dir2›

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

- Gustavo Cavalieri Fernandes

Answer 10

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

lessc directory/*.less foo.css

与其将不同的 LESS 文件合并输出到 foo.css，它会修改列表中的第二个文件。我不认同这种做法。

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

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

使用方式如下：

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

- Jessie A. Morris