51

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

我想运行如下命令：

lessc -r less/ css/

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

4

14 回答 14

75

这样做的方法是引导程序所做的 - 有一个文件可以导入所有其他文件并编译它。

@import "variables.less"; 
@import "mixins.less";
于 2013-07-16T15:35:35.600 回答
24

您可以使用以下 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
于 2011-12-29T21:24:04.080 回答
14

如果您想将多个 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
于 2013-06-22T01:50:04.017 回答
6

这个 bash 脚本对我有用：

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

    # echo "$line --> $REPLACE"
    (lessc "$line" "$REPLACE" &)
done
于 2011-06-30T16:28:55.817 回答
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
于 2012-06-12T05:24:21.597 回答
4

我刚刚在@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还是很开心的。

于 2012-03-14T03:28:40.353 回答
3

我写了一个解决问题的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))]

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

于 2011-04-17T16:31:40.300 回答
2

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

for file in *.less; do lessc -x --strict-imports $file `basename $file | sed -e "s/less/css/"` ; done
于 2014-12-15T12:13:21.700 回答
2
于 2017-08-02T22:13:11.090 回答
1

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

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
于 2013-12-12T22:13:20.180 回答
1

如果您希望将所有 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 中测试

于 2018-07-21T09:10:46.913 回答
0

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

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

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

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

于 2013-04-22T13:36:08.203 回答
0

我编译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
于 2017-07-12T07:29:17.620 回答
-1

这是理想的解决方案。

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

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

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

lessc combined.less > compiled.css
于 2016-06-15T20:38:03.720 回答